使用javascript添加或删除嵌套JSON对象中的特定节点

我想做树状结构。在每个节点中都有两个符号（+用于添加一个或多个节点，-用于删除特定节点）。我面临的问题是如何从嵌套的json中添加/删除节点（子节点）。对于一个或两个级别的嵌套，这很好，但对于多个级别，我无法编写一些通用代码来执行此操作。下面是默认的json和树的图片，我必须在上面执行添加/删除操作。在HTML和CSS中，我没有问题。在过去的两天里，我一直在做这方面的工作，欢迎您提供一些线索或提示。谢谢

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": []
            }]
        }]
    }
]
}

---

因为您有唯一的名称，所以可以创建一个查找对象，将name属性作为键，树节点作为其值。然后，您可以根据其名称快速转到任何节点。通过向每个节点对象添加父属性，可以找到给定节点的父对象

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

var data={name:“abc”，…}；
var查找={}；
函数buildLookup（节点、父节点）{
node.parent=父节点；
查找[node.name]=节点；
if（节点子节点）{
对于（var i=0；i

-/+按钮可以包含传递给事件处理程序的name属性：

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

+
-

和处理程序：

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;
  });
}

var addBtns=document.queryselectoral（“.button plus”）；
对于（变量i=0；i

一种方法是使用节点数据结构而不是JSON。需要时，可以轻松地将普通JS对象转换为JSON或从JSON转换为JSON

这样，处理数据就简单多了。 您可以将DOM事件连接到节点上的方法，并在完成后转换为JSON

function Node(value, parent) {
    let children = [];

    let self = {
        value: value,
        children: children, 

        // create and return a new node for the value
        add: value => {
            let child = Node(value, self);
            children.push(child);
            return child;
        },

        // remove this node from its parent, if it has one
        remove: () => {
            if (parent !== null && typeof parent !== 'undefined') {
                let indexInParent = parent.children.indexOf(self);
                if (indexInParent > -1) {
                    parent.children.splice(indexInParent, 1);
                }
            }
        },

        // return a plain object that has only data and contains no references to parents
        // JSON.stringify cannot handle circular references
        dataOnly: function () {
            return {
                value: value,
                children: children.map(c => c.dataOnly())
            }
        },

        // return a JSON string for this object
        makeJSON: () => JSON.stringify(self.dataOnly())
    };
    return self;
}


root = Node('lame');
child = root.add('child');
console.log(root.makeJSON());
// logs {"value":"lame","children":[{"value":"child","children":[]}]}

---

基本上，当您单击+/-时，您应该将函数绑定到json节点，以便它知道要将子节点添加到哪个节点。不确定这是否回答了您的问题，但是：您的意思是从节点中删除子节点，或者从其父节点中删除节点？@RonyHe从父节点中删除节点是唯一的名称属性吗？谢谢James，我将尝试此解决方案谢谢RonyHe，我将尝试此方法