使用JavaScript点击按钮删除段落时出现removeChild参数错误如何解决

• 两个集合的范围不匹配：document.querySelectorAll('p') 会返回整个文档内所有<p>元素的集合，而divTag.children仅返回divTag节点下的所有直接子元素集合。如果页面中存在不属于divTag直接子元素的<p>，allPs.length就会大于divTag.children的长度，用allPs.length-1作为索引取值时会得到undefined，removeChild接收非对象类型的undefined作为参数就会抛出该错误。
• 索引非法：如果页面中没有任何<p>元素，allPs.length为0，allPs.length-1为-1，用负数索引从divTag.children取值同样会得到undefined，触发报错。
• 目标节点层级不匹配：如果你要删除的<p>是divTag的嵌套子元素而非直接子元素，divTag.children根本无法获取到对应的<p>元素，也会出现参数不合法的问题。

如果你要删除的是divTag下的最后一个直接子

#

btnDelete.addEventListener('click', function(){
  // 只获取divTag下的所有直接子p元素，保证范围匹配
  var allPs = divTag.querySelectorAll(':scope > p');
  if (allPs.length > 0) {
    divTag.removeChild(allPs[allPs.length - 1]);
  }
});

如果你要删除的是整个页面的最后一个

#

btnDelete.addEventListener('click', function(){
  var allPs = document.querySelectorAll('p');
  if (allPs.length > 0) {
    let lastP = allPs[allPs.length - 1];
    // 直接调用目标节点父元素的removeChild，不用手动匹配父节点
    lastP.parentNode.removeChild(lastP);
  }
});

现代浏览器简化写法（兼容IE11及以上版本） #

可以直接调用元素自身的remove方法，不需要手动获取父节点：

btnDelete.addEventListener('click', function(){
  // 按需求替换为对应的选择器即可
  const allPs = divTag.querySelectorAll('p');
  allPs.length && allPs.at(-1).remove();
});

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