如何不借助parentNode移除父元素？无父元素时如何移除节点？

1. 当div无父元素时调用parentNode.removeChild(div)会怎样？ #

简单说：会直接抛出TypeError错误。

当一个元素没有父元素时，它的parentNode属性会返回null。而removeChild()是Node接口的方法，只能在有效的父节点上调用——你总不能让null去执行一个方法吧？举个实际例子：

const div = document.createElement('div'); // 刚创建的元素还没挂载到DOM，没有父元素
div.parentNode.removeChild(div); // 这里会报错：Uncaught TypeError: Cannot read properties of null (reading 'removeChild')

这种情况下，浏览器会明确告诉你无法读取null的removeChild属性，因为根本不存在这个父节点可以执行移除操作。

2. 不借助父元素移除div的方法 #

现代浏览器早就提供了更简洁、更安全的解决方案：直接使用**Element.remove()**方法。

这个方法的优势在于：

• 不管元素有没有父元素，调用它都不会报错
• 有父元素时，会直接将元素从DOM树中移除；没有父元素时，执行后也不会有任何异常
• 语法极度简洁，不需要绕到父节点

示例代码：

// 情况1：元素已经在DOM中
const existingDiv = document.getElementById('my-div');
existingDiv.remove(); // 直接移除，无需父节点

// 情况2：元素还没挂载到DOM
const newDiv = document.createElement('div');
newDiv.remove(); // 不会报错，只是执行了一个无实际效果的操作（因为元素本来就不在DOM里）

如果需要兼容非常老旧的浏览器（比如IE），那可以做个简单的兼容判断：

function removeElement(el) {
  if (el.remove) {
    el.remove();
  } else if (el.parentNode) {
    el.parentNode.removeChild(el);
  }
}

这样既兼顾了现代浏览器的便捷性，也兼容了不支持remove()的旧环境。

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