title: Remove selected node from Tree
body: <p>I am displaying a tree in Angular2 application using angular-tree-component (<a href="https://angular2-tree.readme.io" rel="nofollow noreferrer">https://angular2-tree.readme.io</a>).</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/GzdBG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GzdBG.png" alt="Node selected in Tree"></a></p>
  
  <p>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.</p>
  
  <pre><code>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" &amp;&amp; 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;
            }
          } 
        }
      }
    }
  </code></pre>
  
  <p>Below is the JSON which is rendering the tree.</p>
  
  <pre><code>{
          "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"
      }
  </code></pre>
  
  <p>How can I delete the complete node, including children? Also, is there a better way to accomplish this?</p>