这个错误Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node本质上是说：你尝试从某个父节点里删除一个子节点，但这个子节点根本不属于这个父节点——要么是父节点找错了，要么是子节点已经被移除，结合你说的「第一个项能正常删除，后续项报错」，大概率是下面这两种情况：

1. 遍历用了「实时HTML集合」，删除元素后集合自动更新导致索引混乱 #

如果你是用getElementsByClassName、children这类方法获取要删除的元素，得到的是实时更新的HTMLCollection——也就是说，当你删除一个元素后，这个集合的长度和元素索引会立刻变化。举个典型的错误示例：

// 错误写法：用了实时集合
const items = document.getElementsByClassName('product-item');
for (let i = 0; i < items.length; i++) {
  const checkbox = items[i].querySelector('input[type="checkbox"]');
  if (checkbox.checked) {
    document.querySelector('.category-list').removeChild(items[i]);
  }
}

当你删除第一个元素后，items集合的长度会减1，原来的第二个元素会自动变成items[0]，但循环的i已经递增到1，这时候items[1]其实是原来的第三个元素，循环到最后甚至会出现items[i]为undefined的情况，尝试删除不存在的节点就会触发报错。

修正方案： #

把实时集合转换成静态数组，或者倒序遍历：

方案A：转成数组遍历（推荐）

// 用querySelectorAll获取静态NodeList，再转成数组
const items = Array.from(document.querySelectorAll('.product-item'));
items.forEach(item => {
  const checkbox = item.querySelector('input[type="checkbox"]');
  if (checkbox?.checked) {
    // 直接调用元素自身的remove方法，无需指定父节点，更可靠
    item.remove();
  }
});

方案B：倒序遍历

const items = document.getElementsByClassName('product-item');
// 从后往前遍历，避免索引错位
for (let i = items.length - 1; i >= 0; i--) {
  const checkbox = items[i].querySelector('input[type="checkbox"]');
  if (checkbox.checked) {
    items[i].parentElement.removeChild(items[i]);
  }
}

2. 错误地固定了父节点引用，或子节点的父节点并非你预期的那个 #

如果你提前固定了父节点（比如const parent = document.querySelector('.category-list')），但某些列表项可能因为其他DOM操作（比如之前的删除、动态移动）已经不在这个父节点下了，或者你误将其他节点当成了父节点，这时候调用parent.removeChild(item)就会报错。

修正方案： #

直接使用元素自身的remove()方法（现代浏览器都支持），或者通过item.parentElement获取它的直接父节点再删除：

// 直接删除元素自身，无需关心父节点
item.remove();

// 或者用父节点删除（兼容旧浏览器）
item.parentElement.removeChild(item);

额外检查点 #

• 确认没有重复绑定删除事件，避免多次尝试删除同一个元素
• 检查是否有其他代码修改了列表项的DOM结构（比如把li移动到了其他容器）

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