目录

HTML DOM 元素 removeChild()

❮上一节 ❮ 元素对象参考下一节❯

示例

从列表中删除第一个元素：

const list = document.getElementById("myList");
list.removeChild(list.firstElementChild);

前：

咖啡
茶
牛奶

后：

茶
牛奶

亲自试一试 »

如果列表有子节点，则删除第一个（索引 0）：

const list = document.getElementById("myList");

if (list.hasChildNodes()) {
list.removeChild(list.children[0]);
}

亲自试一试 »

从列表中删除所有子节点：

const list = document.getElementById("myList");

while (list.hasChildNodes()) {
list.removeChild(list.firstChild);
}

亲自试一试 »

下面有更多示例。

描述

这个removeChild()方法删除元素的子元素。

笔记

子级将从文档对象模型 (DOM) 中删除。

但是，返回的节点可以修改并插入回 DOM（请参阅"More Examples"）。

也可以看看：

appendChild() 方法

insertBefore() 方法

ReplaceChild() 方法

childNodes 属性

第一个子属性

最后一个子属性

firstElementChild 属性

LastElementChild 属性

语法

element.removeChild( node)

node.removeChild( node)

参数

Parameter	Description
node	Required. The node (element) to remove.

返回值

类型	描述
节点	删除的节点（元素）。 `null`如果孩子不存在。

更多示例

从其父节点中删除一个元素：

element.parentNode.removeChild(element);

亲自试一试 »

示例

从其父元素中删除一个元素，然后再次插入：

const element = document.getElementById("myLI");

function removeLi() {
element.parentNode.removeChild(element);
}
function appendLi() {
const list = document.getElementById("myList");
list.appendChild(element);
}

亲自试一试 »

笔记

使用追加子对象()或者在()之前插入将删除的节点插入到同一文档中。

使用document.adoptNode()或者文档.importNode()将其插入到另一个文档中。

示例

从其父元素中删除一个元素并将其插入到另一个文档中：

const child = document.getElementById("mySpan");

function remove() {
child.parentNode.removeChild(child);
}

function insert() {
const frame = document.getElementsByTagName("IFRAME")[0]
const h = frame.contentWindow.document.getElementsByTagName("H1")[0];
const x = document.adoptNode(child);
h.appendChild(x);
}

亲自试一试 »

浏览器支持

element.removeChild()是 DOM Level 1 (1998) 功能。

所有浏览器都完全支持它：


Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	9-11

❮上一节 ❮ 元素对象参考下一节❯