点击删除按钮移除指定DOM元素时报splice不是函数如何解决？

问题原因 #

• document.querySelectorAll() 返回的是类数组的 NodeList 对象，不是原生JS数组，本身不自带splice数组方法，所以调用会直接抛出类型错误。
• 就算你把NodeList转成数组调用splice，也只会删除数组里的元素引用，不会真正移除页面上的DOM节点，达不到删除对应元素的效果。

解决方案 #

方案1：直接获取对应按钮的父元素删除（最推荐） #

不需要查询所有child元素，点击按钮时直接找匹配的父级节点移除即可，还不会出现下标错乱的问题：

const btns = document.querySelectorAll('.btn');
btns.forEach(button => {
  button.addEventListener('click', () => {
    // 向上查找最近的class为child的祖先元素并移除
    button.closest('.child').remove();
  });
});

注：closest()方法兼容性好，比直接取parentNode更稳定，就算后续调整DOM结构把按钮嵌套了层级，代码也能正常生效。

方案2：按下标操作的实现 #

如果业务场景必须要通过下标处理元素，先把NodeList转成真实数组，同时注意要调用DOM的remove方法才能真正删除页面元素：

const btns = document.querySelectorAll('.btn');
btns.forEach((button, i) => {
  button.addEventListener('click', () => {
    // 将NodeList转为真实数组
    const boxes = Array.from(document.querySelectorAll('.child'));
    // 移除页面上的DOM节点
    boxes[i].remove();
    // 如果需要保留数组做后续操作，再调用splice删除数组项
    boxes.splice(i, 1);
  });
});

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