[HOW TO] Delete a node from a tree

I want to delete a node from a tree. Given nodeToDelete, this method doesn’t work

The splice method doesn’t work, as soon as you call update() the item well be back

const itemIndex = nodeToDelete.index;
nodeToDelete.parent.children.splice(itemIndex, 1); // item disappear
this.tree.treeModel.update(); // item comes back again

If I use the array that I am binding to the tree then I can delete elements from the root as such

const itemIndex = nodeToDelete.index;
this.nodes.splice(itemIndex, 1);
this.tree.treeModel.update();

What if the node I want to delete is not in the root of the nodes array i.e. it is a child of another node?

The first option clearly much better but it doesn’t work, the delete is not persisted in the tree.

[dlemoing]

You can use something like this:

deleteNode(node: TreeNode) : void {
    if (node.parent != null) {
        node.parent.data.children.splice(node.parent.data.children.indexOf(node.data), 1)
        this.tree.treeModel.update()
    }
}

[AbhiThakare]

@sulhome

You can try as below

deleteNode(node, tree){
  let parentNode = node.realParent ? node.realParent : node.treeModel.virtualRoot;
        _.remove(parentNode.data.children, function (child) {
            return child === node.data;
        });
        tree.treeModel.update();
        if (node.parent.data.children.length === 0) {
            node.parent.data.hasChildren = false;
        }
  }

and call deleteNode function from your HTML on node.

<tree-root   #tree
      [nodes]="nodes"
      [options]="customTemplateStringOptions">
      <ng-template #treeNodeTemplate let-node>
        <span title="{{node.data.subTitle}}">{{ node.data.name }}</span>
        <span class="pull-right">{{ childrenCount(node) }}</span>
        <button (click)="deleteNode(node, tree)">-</button>
      </ng-template>
      <ng-template #loadingTemplate>Loading, please hold....</ng-template>
 </tree-root>

Hope this will help

Pleas let me know output.

Thanks Abhi.