JavaScript Element removeChild() 方法

removeChild()方法删除指定元素的指定子节点。以Node对象的形式返回已删除的节点，如果该节点不存在，则返回null。

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

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

实例：

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

var list = document.getElementById("myList");   // 获取id=“myList”的<ul>元素
list.removeChild(list.childNodes[0]);                // 删除<ul>的第一个子节点（索引0）

尝试一下

浏览器支持

项	IE/Edge	Chrome	FireFox	Safari	Opera
方法
removeChild()	支持	支持	支持	支持	支持

语法

node.removeChild(node)

参数值

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

技术细节

项目	描述
返回值：	表示已删除节点的Node对象; 如果该节点不存在，则为null
DOM版本	Core Level 1

更多例子

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

// 获取id=“myList”的<ul>元素
var list = document.getElementById("myList");

// 如果<ul>元素具有任何子节点，请删除其第一个子节点
if (list.hasChildNodes()) {
  list.removeChild(list.childNodes[0]);
}

尝试一下

删除列表的所有子节点：

// 获取id =“myList”的<ul>元素
var list = document.getElementById("myList");

//只要<ul>有子节点，就删除它
while (list.hasChildNodes()) {   
  list.removeChild(list.firstChild);
}

尝试一下

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

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

尝试一下

从其父项中删除<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);
}

尝试一下

JavaScript Element removeChild() 方法

JavaScript Element removeChild() 方法

浏览器支持

语法

参数值

技术细节

更多例子

相关页面