删除DOM节点——removeChild

上一节我们看了如何使用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>

删除节点示例

我是将要被删除的节点

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

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

父节点.removeChild(子结点)

removeChild的返回值

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

var removed = xxx.removeChild(xxxx);

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