HTML DOM removeChild() 方法

实例

从列表中删除一个项目:

var list = document.getElementById("myList"); // Get the <ul> element with id="myList"
list.removeChild(list.childNodes[0]); // Remove <ul>'s first child node (index 0)

删除之前:

Coffee
Tea
Milk

删除之后:

Tea
Milk

亲自试一试 »

页面下方有更多实例。

定义和用法

removeChild() 方法指定元素的某个指定的子节点。

以 Node 对象返回被删除的节点，如果节点不存在则返回 null。

注释:移除的子节点不再是DOM的一部分。但是，使用此方法返回的引用，可以在以后将删除的子元素插入到元素中（请参阅"更多示例"）。

提示: 使用 appendChild() 或 insertBefore() 方法将删除的节点插入同一文档。要将其插入另一个文档，请使用 document.adoptNode() 或 document.importNode() 方法。

浏览器支持

方法
removeChild()	Yes	Yes	Yes	Yes	Yes

语法

node.removeChild(node)

参数值

参数	类型	描述
node	Node object	必需。要删除的节点对象

技术细节

返回值:	Node 节点对象，表示移除的节点，如果节点不存在，则为 null
DOM 版本	Core Level 1 Node Object

更多实例

实例

找出列表是否有子节点。如果是，请删除其第一个子节点（索引0）:

// Get the <ul> element with id="myList"
var list = document.getElementById("myList");

// If the <ul> element has any child nodes, remove its first child node
if (list.hasChildNodes()) {
list.removeChild(list.childNodes[0]);
}

删除之前:

Coffee
Tea
Milk

删除之后:

Tea
Milk

亲自试一试 »

实例

删除列表的所有子节点:

// Get the <ul> element with id="myList"
var list = document.getElementById("myList");

// As long as <ul> has a child node, remove it
while (list.hasChildNodes()) {
list.removeChild(list.firstChild);
}

删除之前:

Coffee
Tea
Milk

删除之后:

亲自试一试 »

实例

从父元素中删除 id="myLI" 的 <li> 元素（不指定其父节点）:

var item = document.getElementById("myLI");
item.parentNode.removeChild(item);

删除之前:

Coffee
Tea
Milk

删除之后:

Coffee
Milk

亲自试一试 »

实例

从父元素中删除 <li> 元素，然后再次插入:

var item = document.getElementById("myLI");

function removeLi() {
item.parentNode.removeChild(item);
}

function appendLi() {
var list = document.getElementById("myList");
list.appendChild(item);
}

亲自试一试 »

实例

从父元素中删除 <span> 元素，并将其插入另一个文档中的 <h1> 元素:

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

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

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

亲自试一试 »

❮ Element 对象