Node.removeChild - Web API 接口参考 编辑

Node.removeChild() 方法从DOM中删除一个子节点。返回删除的节点。

语法

let oldChild = node.removeChild(child);

//OR

element.removeChild(child);

• child 是要移除的那个子节点.
• node 是child的父节点.
• oldChild保存对删除的子节点的引用. oldChild === child.

被移除的这个子节点仍然存在于内存中,只是没有添加到当前文档的DOM树中,因此,你还可以把这个节点重新添加回文档中,当然,实现要用另外一个变量比如上例中的oldChild来保存这个节点的引用. 如果使用上述语法中的第二种方法, 即没有使用 oldChild 来保存对这个节点的引用, 则认为被移除的节点已经是无用的, 在短时间内将会被内存管理回收.

如果上例中的child节点不是node节点的子节点,则该方法会抛出异常.

示例

<!--Sample HTML code-->
<div id="top" align="center"> </div>

<script type="text/javascript">
      var top = document.getElementById("top");
      var nested = document.getElementById("nested");
      var garbage = top.removeChild(nested);
      //Test Case 2: the method throws the exception (2)
</script>

<!--Sample HTML code-->
<div id="top" align="center">
 <div id="nested"></div>
</div>

<script type="text/javascript">
      var top = document.getElementById("top");
      var nested = document.getElementById("nested");
      var garbage = top.removeChild(nested);
      // This first call remove correctly the node
      garbage = top.removeChild(nested);
      // Test Case 1: the method in the second call here, throws the exception (1)
</script>

<!--示例HTML代码-->

<div id="top" align="center">
  <div id="nested"></div>
</div>

// 先定位父节点,然后删除其子节点
var d = document.getElementById("top");
var d_nested = document.getElementById("nested");
var throwawayNode = d.removeChild(d_nested);

// 无须定位父节点,通过parentNode属性直接删除自身
var node = document.getElementById("nested");
if (node.parentNode) {
  node.parentNode.removeChild(node);
}

// 移除一个元素节点的所有子节点
var element = document.getElementById("top");
while (element.firstChild) {
  element.removeChild(element.firstChild);
}

规范

• DOM Level 1 Core: removeChild
• DOM Level 2 Core: removeChild
• DOM Level 3 Core: removeChild

相关链接

• Node.replaceChild
• Node.parentNode
• ChildNode.remove