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

如果 childnull,则抛出此异常。

示例

简单的示例

给定以下 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
# dom-node-removechild

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
removeChild

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见