Node：removeChild() 方法

Node 接口的 removeChild() 方法会从 DOM 中移除一个子节点，并返回移除的节点。

备注：只要对被移除的子节点保持引用，它仍然存在于内存中，但不再是 DOM 的一部分。在以后的代码中仍可重复使用。

如果不存储 removeChild() 的返回值，也不保留其他引用，该节点将在短时间内在内存中自动删除。

与 Node.cloneNode() 不同，返回值保留了与其关联的 EventListener 对象。

语法

js
removeChild(child)

参数

child

Node，即要从 DOM 中删除的子节点。

异常

NotFoundError DOMException

如果 child 不是该节点的子节点，则抛出此异常。

TypeError

如果 child 为 null，则抛出此异常。

示例

简单的示例

给定以下 HTML：

html
<div id="parent">
  <div id="child"></div>
</div>

在已知其父节点时移除指定元素：

js
const parent = document.getElementById("parent");
const child = document.getElementById("child");
const throwawayNode = parent.removeChild(child);

在不需要指定其父节点的情况下移除指定元素：

js
const node = document.getElementById("child");
if (node.parentNode) {
  node.parentNode.removeChild(node);
}

从元素中移除所有子元素：

js
const element = document.getElementById("idOfParent");
while (element.firstChild) {
  element.removeChild(element.firstChild);
}

引发 TypeError

html
<!--HTML 代码示例-->
<div id="parent"></div>
js
const parent = document.getElementById("parent");
const child = document.getElementById("child");

// 抛出未捕获的 TypeError
const garbage = parent.removeChild(child);

引发 NotFoundError

html
<!--HTML 代码示例-->
<div id="parent">
  <div id="child"></div>
</div>
js
const parent = document.getElementById("parent");
const child = document.getElementById("child");

// 第一次调用正确并移除了该节点。
const garbage = parent.removeChild(child);

// 抛出 NotFoundError
garbage = parent.removeChild(child);

规范

Specification
DOM Standard
# dom-node-removechild

浏览器兼容性

BCD tables only load in the browser

参见