控制台报错Uncaught TypeError: Cannot read property 'removeChild' of null求解决

嘿，这个错误我太常见了！咱们先搞懂为啥会出现这个问题：

这个报错说明你代码里的removeThis.parentNode.parentNode是null——要么是你要删除的节点已经被移除了，要么是removeThis本身就没找到对应的DOM元素，导致它的父节点也是null，自然没法调用removeChild啦。

给你几个实用的解决办法：

• 先做存在性检查，避免空值报错
  在执行删除操作前，先确认所有依赖的节点都存在，这样就不会触发null报错了：

  setInterval(function() {
    // 逐层检查节点是否存在
    if (removeThis && removeThis.parentNode && removeThis.parentNode.parentNode) {
      removeThis.parentNode.parentNode.removeChild(removeThis.parentNode);
    }
  }, 7000);
  

• 改用更简洁安全的remove()方法
  现代浏览器都支持DOM元素的remove()方法，不用绕弯子找父节点，代码更简洁：

  setInterval(function() {
    if (removeThis && removeThis.parentNode) {
      removeThis.parentNode.remove();
    }
  }, 7000);
  

  要是你的项目支持ES2020+，还能用可选链操作符?.进一步简化，自动处理空值：

  setInterval(function() {
    removeThis?.parentNode?.remove();
  }, 7000);
  

• 删除后清除定时器，避免无效执行
  元素被删除后，定时器还会一直跑着检查，既浪费性能也可能引发不必要的报错，记得删除后停止定时器：

  const deleteTimer = setInterval(function() {
    if (removeThis && removeThis.parentNode && removeThis.parentNode.parentNode) {
      removeThis.parentNode.parentNode.removeChild(removeThis.parentNode);
      clearInterval(deleteTimer); // 删除完成后立刻停止定时器
    }
  }, 7000);
  

另外还要排查下：是不是在定时器执行的7秒内，removeThis对应的元素已经被其他代码移除了？或者DOM结构发生了变化？可以在定时器里加个console.log(removeThis)，看看执行时这个变量是不是null，就能找到根源啦。

内容的提问来源于stack exchange，提问作者Shahinur Rahman Shadhin