Remove selected node from Tree

Question

I am displaying a tree in Angular2 application using angular-tree-component (https://angular2-tree.readme.io).

I need to give user the capability to select any node in the tree and delete it. This should remove the selected node and all it's children (if it's a leaf node, then just the node). When user is done, the pruned tree will be send to the server and saved there.

In the below example, user selects 'Node 1-2' and clicks on Delete. This removes 'Node 1-2, 'Node 1' and 'Node 2' from the view and underlying Javascript object updated. User can then click another button (say, Save) to save the updated object on the Server.

In order to accomplish this, I wrote the following code which is called on click of Delete button. I store the id of the selected node, and then iterate over the complete tree to find that id. When the id matches, I use the 'delete' keyword to delete 'id' and 'text'. However, 'delete children' does not work.

deleteSelectedNode() { 
    //Get the node which was selected by the user  
    let nodeToDelete: TreeNode = this.myService.getActiveNode();
    //id will be unique, can be used to identify the node
    let idToDelete = nodeToDelete.data.id; 
    this.traverseTree(this.nodes[0], idToDelete);
  }

  traverseTree(obj, idToDelete: string) {

    for (var k in obj) {
      if (typeof obj[k] == "object" && obj[k] !== null) {
        this.traverseTree(obj[k], idToDelete);
      }

      else {
        if (k === 'id') {
          let id = obj[k];
          if (id === idToDelete) {
            console.log('ID Matched ' + id);
            delete obj['id'];
            delete obj['text'];
            delete obj['children']; 
            break;
          }
        } 
      }
    }
  }

Below is the JSON which is rendering the tree.

{
        "children": [
            {
                "children": [
                    {
                        "text": "Node 1",
                        "id": "A493"
                    },
                    {
                        "text": "Node 2",
                        "id": "A494"
                    }
                ],
                "text": "Node 1-2",
                "id": "A491"
            },
            {
                "children": [
                    {
                        "children": [
                            {
                                "text": "Node 3",
                                "id": "A5ab"
                            },
                            {
                                "text": "Node 4",
                                "id": "A5ac"
                            },
                            {
                                "text": "Node 5",
                                "id": "A5ad"
                            },
                            {
                                "text": "Node 6",
                                "id": "A5ae"
                            },
                            {
                                "text": "Node 7",
                                "id": "A5af"
                            },
                            {
                                "text": "Node 8",
                                "id": "A5b0"
                            },
                            {
                                "text": "Node 9",
                                "id": "A5b1"
                            },
                            {
                                "text": "Node 10",
                                "id": "A5b2"
                            },
                            {
                                "text": "Node 11",
                                "id": "A5b3"
                            },
                            {
                                "text": "Node 12",
                                "id": "A5b4"
                            },
                            {
                                "text": "Node 13",
                                "id": "A6da"
                            },
                            {
                                "text": "Node 14",
                                "id": "A6db"
                            }
                        ],
                        "text": "Node 1-14",
                        "id": "A495"
                    },
                    {
                        "children": [
                            {
                                "text": "Node 15",
                                "id": "A6dc"
                            },
                            {
                                "text": "Node 16",
                                "id": "A6dd"
                            },
                            {
                                "text": "Node 17",
                                "id": "A6de"
                            },
                            {
                                "text": "Node 18",
                                "id": "A6df"
                            },
                            {
                                "text": "Node 19",
                                "id": "A6e0"
                            },
                            {
                                "text": "Node 20",
                                "id": "A6e1"
                            },
                            {
                                "text": "Node 21",
                                "id": "A6e2"
                            },
                            {
                                "text": "Node 22",
                                "id": "A6e3"
                            }
                        ],
                        "text": "Node 15-22",
                        "id": "A496"
                    },
                    {
                        "text": "Node 23",
                        "id": "A497"
                    },
                    {
                        "text": "Node 24",
                        "id": "A498"
                    }
                ],
                "text": "Node 23-24",
                "id": "A492"
            }
        ],
        "text": "Node 1-24",
        "id": "A490"
    }

How can I delete the complete node, including children? Also, is there a better way to accomplish this?

vegazz vegazz · Accepted Answer · 2017-06-01T20:02:43

You can do it easily trough parent reference

deleteNode() {
    let nodeToDelete: TreeNode = this.tree.treeModel.getActiveNode();
    if (nodeToDelete.level === 1) {
      this.nodes = this.nodes.filter((n) => n.id !== nodeToDelete.id);
    } else {
      nodeToDelete.parent.children = nodeToDelete.parent.children.filter((n) => n.id !== nodeToDelete.id);
    }    
  }

Remove selected node from Tree

1 Answers