删除DOM节点——removeChild

本节介绍了如何使用removeChild从文档中删除DOM节点，举出一个简单例子的同时还简单介绍了该函数的返回值。

上一节我们看了如何使用innerHTML来修改DOM，而使用removeChild函数则可以删除文档中的指定节点。我们仍然使用一个例子来说明该函数的使用方法。

HTML代码

<div id="test">
	<p>我是将要被删除的节点</p>
</div>

实例JavaScript代码

<script type="text/javascript">
function remove(){
	var test = document.getElementById("test");
	var children = test.childNodes;
	for(i=0;i<children.length;i++){
		test.removeChild(children[i]);
	}
}
</script>

删除节点示例

我是将要被删除的节点

，点击这个按钮就会将上面div的子结点全部删除。

从上面的JS代码可以看到，使用removeChild的格式为：

父节点.removeChild(子结点)

removeChild的返回值

removeChild删除节点后会返回被删除节点的引用，这样当我们以后再想重新将它添加到文档中，或者是对它进行其它操作的时候就可以使用这个引用了。例如下面的代码段：

var removed = xxx.removeChild(xxxx);

则removed就是被删除的节点，可以在后面的代码中使用。

菜鸟的HTML DOM笔记目录

  1. DOM可以做什么？
  2. DOM的结构
  3. 访问DOM节点1——getElementById()
  4. 访问DOM节点2——getElementsByTagName()
  5. 访问DOM节点3——通过节点关系
  6. DOM节点信息
  7. DOM信息nodeType的应用
  8. 修改DOM——innerHTML
  9. 删除DOM节点——removeChild
  10. 添加DOM节点
  11. DOM简介总结