Javascript 从树中重复删除项目

我正在尝试创建一个树组件。但我不知道如何在树中递归删除项

每一个项目都是它自己创建的，我想在每一个级别删除一个项目/树的分支

问题是，当我选择和项并且没有子项时，我必须找到他的父项并删除所选项。但如果所选项目有子项，我必须找到其父项，获取所选项目的所有子项，更新子项的所有parentId，添加到父项，并删除所选项目。递归地执行所有这些操作并返回更新的数组

const data = [
  {id: 1, title: 'foo', children: [
    {id: 11, parentId: 1, title: 'bar',},
    {id: 12, parentId: 1, title: 'baz', children: [
      {id: 121, parentId: 12, title: 'qux'},
      {id: 122, parentId: 12, title: 'quz'}
    ]},
    {id: 13, parentId: 1, title: 'corge'}
  ]},
  {id: 2, title: 'grault'}
];

const id = 12;
console.log (removeElement(data, id));

结果应该是：

const data = [
  {id: 1, title: 'foo', children: [
    {id: 11, parentId: 1, title: 'bar', children: [
      {id: 121, parentId: 11, title: 'qux'},
      {id: 122, parentId: 11, title: 'quz'}
    ]},
    {id: 13, parentId: 1, title: 'corge'}
  ]},
  {id: 2, title: 'grault'}
];

希望这会有所帮助

常数数据=[ { id:1， 标题：富， 儿童：[ {id:11，parentId:1，title:bar}， { id:12， 父ID:1， 标题:baz,， 儿童：[ {id:121，parentId:12，title:qux}， {id:122，parentId:12，title:quz}， ], }, {id:13，parentId:1，title:corge}， ], }, {id:2，title:grault}， ]; 常数id=12； 函数removeElementdata，id{ 返回数据 .filterdt=>{ 返回dt.id！==id； } .mapdt=>{ 如果是孩子{ 返回{ …dt， children:removelementdt.children，id， }; } 返回dt； }; }

---

console.logremovelementdata，id 虽然这可以在一个函数中完成，但如果您使用编写此函数，它会更加简洁，重复性也会降低。这里我们写两个函数。从数组中删除元素，并用它可能具有的任何子元素替换它。另一个处理单个对象，从该对象及其任何子对象中删除id。这里的主要函数是removeElement，如果初始数据是数组，它将在输入上调用removeElementFromArray；如果初始数据是普通对象，它将针对任何子对象调用removeElementFromArray

常量removeElementFromArray=arr，id=> 平面地图 o=>o.id==id ? […o.children | |[]map o=>removeElement o，id] ：[removeElement o，id] const removelement=obj，id=> 数组。isArray对象 ? removeElementFromArray对象，id ：{…obj，…obj.children？{children:removeelementfromrarray obj.children，id}:{} 常数数据=[ {id:1，标题：'foo'，子项：[ {id:11，标题：'bar'}， {id:12，标题：“baz”，儿童：[ {id:121，标题：'qux'}， {id:122，标题：'quz'} ]}, {id:13，标题：'corge'} ]}, {id:2，标题：'grault'} ]; console.log removeElement数据，121//121已删除 console.log removeElement数据，12//12已删除；121和122移到1 console.log removeElement数据，1//1已删除；11、12、13移动到根目录 console.log removeElement数据，42//无更改

---

.as console wrapper{min height:100%！important；top:0}我同意Scott的观点，即交互递归非常适合解决这个问题。不过，我会将责任划分得稍有不同-

const remove=t=[]，id=0=> t、 flatMapv=>remove1v，id const remove1={children=[]，…t}，id=0=>//删除一个 t、 id==id ? 移除儿童，id ：[{…t，children:removechildren，id}] 常数数据=[ {id:1，标题：'foo'，子项：[ {id:11，标题：'bar'}， {id:12，标题：“baz”，儿童：[ {id:121，标题：'qux'}， {id:122，标题：'quz'} ]}, {id:13，标题：'corge'} ]}, {id:2，标题：'grault'} ]; console.logremovedata，121 console.logremovedata，12 console.logremovedata，1 console.logremovedata，42

---

.as控制台包装器{min height:100%！important；top:0}显示您的尝试。要删除哪些项目？随机一个？如果你想要一棵树，你不需要parentId；如果希望数据是{id，title，parentId}项的数组，请使用parentId。对于您的问题，看起来您希望删除项目12，并将其子项放在项目11中，这不是一个递归逻辑childrens在上一个成员上移动-这很棘手-而不是在父项的父项上@D.Pardal:要删除的id在问题中。请现在检查是否喜欢相互递归！这个答案对于在没有子属性的情况下保留节点有很大帮助。您非常擅长将预期输出与严格的规范相匹配。我通常不那么宽容/宽容地做这件事_v@Thankyou当前位置我不确定哪种方法总体上更好。你的可能在教学上更合理；我的可能更实用。但也许不是，因为，正如你的答案所示，你通常也会得到一些简单的东西。即使我们更新它以保留子节点，它也会变得更简单。我尝试了一下，但它涉及到我偏离了正常的更新。不确定我对它有多满意…有个问题。。。移开树枝，但不要移开他的children@Javier例如我不知道你在说什么。这将删除分支，并将其子节点上移为其父节点的子节点。那可能不是你想要的。再看这个问题,，

---

看起来好像您要将它们移动到父级的上一个同级。这就更难了，并且会引发各种有趣的问题，比如如果您试图删除节点的第一个子节点，会发生什么。但是你需要提供更多的细节。太棒了！比我的简单多了。