Add or Delete particular node in nested JSON Object using javascript

Question

I want to make tree like structure. In each node has two sign (+ to add one more node and - to delete the particular node). Problem which I'm facing is how to add/ delete node(children) from nested json. For one or two level nesting its fine, but for more than one, I'm not able to make some general code to do this operation. Below is the default json and picture of tree on which I have to do add/delete operation. In HTML and CSS I have no problem.Some lead or hint is welcomed as for last 2 days I'm working on this. Thanks

JSON :
{
"name": "abc",
"children": [{
        "name": "def",
        "children": [{
            "name": "jkl",
            "children": [{
                "name": "vwxyz",
                "children": []
            }]

        }]
    },
    {
        "level": "2",
        "name": "ghi",
        "children": [{
            "name": "mno",
            "children": []
        }, {
            "name": "pqr",
            "children": [{
                "name": "stu",
                "children": []
            }]
        }]
    }
]
}

Answer 1

Since you have unique names you can make a lookup object with the name attribute as the key and the tree node as its value. Then you can step to any node quickly given its name. By adding a parent property to each node object you can find a given node’s parent.

var data = { name: "abc", ... };
var lookup = {};

function buildLookup(node, parent) {
  node.parent = parent;
  lookup[node.name] = node;
  if (node.children) {
    for (var i = 0; i < node.children.length; i++) {
      buildLookup(node.children[i], node);
    }
  }
}

buildLookup(data, null);
// lookup object now populated

Your -/+ buttons can incorporate the name attribute for passing to event handler:

<button class="button-plus" data-name="def">+</button>
<button class="button-minus" data-name="def">-</button>

And the handler:

var addBtns = document.querySelectorAll(".button-plus");
for (var i=0; i < addBtns.length; i++) {
  addBtns[i].addEventListener("click", function (e) {
    var node = lookup[this.dataset.name];
    // create a new empty child
    var child = {
      name: "new child",
      parent: node,
      children: []
    };
    // add it to the children array
    node.children.push(child);
    // add it to the lookup
    lookup[child.name] = child;
  });
}