Not able to remove leaderLine when stored in the object

[rajeshfavour]

Hi, I am not able to remove the LeaderLine when it is kept inside object. Say I have a method createLine() const newLine = new LeaderLine(startNode, endNode); this.lines.push(newLine); this.lines[0].remove();

Remove throws an error as core.js:6210 ERROR TypeError: Cannot read properties of undefined (reading 'curStats') at lt.remove (leader-line.min.js:2:73554)

[anseki]

Hi @rajeshfavour, thank you for the comment. You called the remove method again maybe. The error should be thrown when you try to remove a line that was already removed, it makes no difference whether it was stored in the object or not.

[rajeshfavour]

Hi @anseki, Thanks for your quick response. I have not called twice. I just use it directly. Yes, there is no difference irrespective of stored in object or not. That is why I am surprised.

Here is my exact code method I have used to create line

  public createLine(startNode: HTMLElement, endNode: HTMLElement): void {
    console.log('---------NEW LINE -----------');
    const a = new LeaderLine(startNode, endNode);
    console.log('NEW Line a ', a);
    this.lines.push(a);
    console.log('Lines Array', this.lines);
  }

it is create the line as expected. Basically I want to destroy the line when I am moving to another screen or component. So I stored the all created lines in this.lines lines: LeaderLine[] = []; array. later I called removeLines method

  public removeLines(): void {
    console.log('NEW LINES ', this.lines, 'Line count ', this.lines.length);
    for (const l of this.lines) {
            l.remove();
        }
  }

But I am getting an error

ERROR Error: Uncaught (in promise): NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
Error: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at lt.remove (leader-line.min.js:2:73752)

[anseki]

I copied your code and ran it. Then, that worked fine without error. https://jsfiddle.net/mhoe1wux/ The code between [COPY] and [/COPY] are your code. I clicked REMOVE button, then lines were removed correctly without error. And, I clicked the button again, then the error was thrown correctly.

Another part of your code may have a bug. I suggest checking flow of your code by using e.g. Code tracker in DevTools.

BTW, in typical and basic system design, your removeLines method should remove own data too. For example: https://jsfiddle.net/mhoe1wux/1/ Just one line were added. Click ADD button several times, and click REMOVE button. And click REMOVE button again, and click it multiple times. Any error is not thrown. The clearing own data is very important for program. It affect performance of your app and many problems (e.g. memory leaking, slow action, etc.). Of course, you should still continue fixing the bug about multiple calling remove method.

[rajeshfavour]

Hi @anseki , Thanks a lot for your response and the code you executed in jsfiddle. I will review my code base and fix this issue. Thanks again for your time

[anseki]

:smile: