Node：removeChild() 方法

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

参见