如何在JavaScript树形对象中按ID删除指定元素？

针对你给出的树形结构对象，要实现按ID删除元素，核心是通过递归遍历找到目标元素的父节点，再从父节点的children数组中移除该元素。以下是两种可行的实现方案：

方案一：直接修改原对象（原地删除） #

这种方式会直接修改传入的对象，适合不需要保留原数据的场景。使用倒序for循环遍历子节点，避免删除元素后索引错乱导致漏处理：

const removeById = (obj, targetId) => {
  if (obj.children && obj.children.length > 0) {
    // 倒序遍历，防止删除元素后索引偏移
    for (let i = obj.children.length - 1; i >= 0; i--) {
      const child = obj.children[i];
      // 当前子节点就是目标，直接移除
      if (child.id === targetId) {
        obj.children.splice(i, 1);
      } else {
        // 递归处理子节点的子树
        removeById(child, targetId);
      }
    }
  }
};

// 测试删除ID为'007'的元素
removeById(obj, '007');
console.log(obj);

// 测试删除ID为'004'的元素
removeById(obj, '004');
console.log(obj);

关键说明： #

• 用for循环替代forEach：forEach无法中断遍历，且删除元素后后续元素的索引会前移，导致部分元素被跳过；倒序遍历则不会出现这个问题。
• 先判断当前子节点是否为目标，再递归处理其子树：确保目标元素被直接移除，同时不影响子树的其他元素处理。

方案二：返回新对象（不可变删除） #

如果需要保留原对象不被修改，可采用这种方式——递归生成新的树形结构，过滤掉目标元素：

const removeByIdImmutable = (obj, targetId) => {
  // 当前节点就是目标，返回null标记为需要移除
  if (obj.id === targetId) {
    return null;
  }
  // 处理子节点：递归过滤后保留有效节点
  const newChildren = obj.children
    .map(child => removeByIdImmutable(child, targetId))
    .filter(child => child !== null);
  // 返回新对象，继承原对象的所有属性并替换children
  return {
    ...obj,
    children: newChildren
  };
};

// 测试，原对象不会被修改
const newObj = removeByIdImmutable(obj, '007');
console.log(newObj);

关键说明： #

• 不可变操作：通过扩展运算符...创建新对象，原对象完全不受影响，适合需要保留原始数据的场景。
• 递归过滤：子节点处理后返回null则被filter筛除，最终生成不包含目标元素的新树形结构。

对你现有代码的修正提示 #

你原来的代码用find找到了目标元素，但find仅返回匹配的元素，无法直接获取其在数组中的索引。改用findIndex或倒序for循环能解决这个问题——前者可以拿到索引后用splice删除，但需要注意遍历顺序的问题，后者则更稳妥。

内容的提问来源于stack exchange，提问作者track_p54skate