为什么用 removeChild 删除节点会报错？

司空冬冬提问于 2026-02-27 22:28:20 阅读 33

前端

我明明查到了要删除的元素，但调用 removeChild 时却提示“无法在 null 上调用 removeChild”，这到底怎么回事？

我的 HTML 结构是这样的：

<div id="container">
  <p id="target">要删除的内容</p>
</div>

JavaScript 代码是：document.getElementById('container').removeChild(document.getElementById('target'));，但有时候就报错，是不是我哪里没考虑到？

节点操作

我来解答赞 1 收藏

反馈

2 条解答

UP主～景红 Lv1

这个问题我之前踩过坑，典型的时机问题。

报错说"无法在 null 上调用 removeChild"，说明 document.getElementById('container') 返回了 null，而不是子元素的问题。

你想想，脚本执行的时候 DOM 还没加载完，container 根本不存在，当然就报错了。

解决办法有两个。

第一，把 script 标签放到 body 结束标签之前，确保 DOM 先加载完。

第二，用事件监听：

document.addEventListener('DOMContentLoaded', function() {

  var container = document.getElementById('container');

  var target = document.getElementById('target');

  if (container && target) {

    container.removeChild(target);

  }

});

顺便说一句，现在浏览器都支持 element.remove() 方法了，直接写 document.getElementById('target').remove() 就行，不用先找父元素，省事很多。不过还是要判断元素是否存在，不然一样报错。

你说的"有时候报错"应该就是脚本位置不稳定，或者页面加载顺序不一致导致的。

2026-03-02 17:13

♫子瑄 Lv1

这个报错说明你调用 removeChild 的那个父元素是 null，也就是说 document.getElementById('container') 没找到东西。

你说"有时候报错"，十有八九是脚本执行时机的问题。DOM 还没渲染完，你的 JS 就跑起来了，当然找不到元素。

最直接的解决方案，把你的脚本放到 body 结束标签前面，或者用 DOMContentLoaded 事件包一层：

document.addEventListener('DOMContentLoaded', function() {

    var container = document.getElementById('container');

    var target = document.getElementById('target');

    if (container && target) {

        container.removeChild(target);

    }

});

性能上多说一句，你现在的写法同一个元素查了两遍，明明可以缓存下来的。而且每次调用 document.getElementById 都要遍历 DOM 树，虽然浏览器做了优化，但能省则省。

另外给你推荐一个更简洁的写法，现代浏览器都支持：

var target = document.getElementById('target');

if (target) {

    target.remove();

}

直接调元素本身的 remove 方法，不用先找父节点再 removeChild，代码少一行，执行也少一次查询。不过要注意 IE 不支持，老项目的话还是用 removeChild 那套。

总之，先确保 DOM 加载完再操作，然后做一下空值判断，这种低级错误以后就不会再犯了。

2026-02-28 17:25