JavaScript：删除节点（removeChild）该留意的一点

假设div里有这么些内容：

<div id="content">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
</div>

现在要通过JavaScript的功能，将它们清空。

虽然可以通过一句代码直接实现：

document.getElementById("content").innerHTML=""

但是本文里主要讨论 removeChild 函数。

很想当然地以为借助下面的代码就能完成：

<script type="text/javascript">
function clearText() {
var content=document.getElementById("content");
for (var i=0; i<content.childNodes.length; i++) {
 var childNode = content.childNodes[i];
 content.removeChild(childNode);
}
}
</script>
<div id="content">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
</div>
<button onclick="clearText();">清除节点内容</button>

没想到，点击了按钮后，竟然只清除掉1、3、5，而2、4、6竟然没有消失，而是继续显示在页面上。

经过逐步研究，发现，上面代码里的for循环，相当于执行了下面的6句：

1、content.removeChild(content.childNodes[0]);  删除第1个节点
2、content.removeChild(content.childNodes[1]);  删除第2个节点
3、content.removeChild(content.childNodes[2]);  删除第3个节点
4、content.removeChild(content.childNodes[3]);  删除第4个节点
5、content.removeChild(content.childNodes[4]);  删除第5个节点
6、content.removeChild(content.childNodes[5]);  删除第6个节点

问题从一开始就产生了：

删除掉第一个节点后，后面节点的顺序全部发生了变化：原来的第二个节点往前蹭，成为新的第一个节点；原来的第三个节点，成为第二个节点……

于是呢，接下来原本是要删除第二个节点的，却将最原始的第三个节点给删除掉了。

最终，并没有全部删除，只删除掉1、3、5，留下了2、4、6。

语法没有错误，但是得不到所要的结果，这就是算法上面的错误！该如何修正呢？

“顺序删除”不行，那就“逆序删除”吧。将 for 语句修改一下：

for (var i=content.childNodes.length-1;i>=0;i--)

试试吧，成功了！

<script type="text/javascript">
function clearText() {
var content=document.getElementById("content");
for (var i=content.childNodes.length-1;i>=0;i--) {
 var childNode = content.childNodes[i];
 content.removeChild(childNode);
}
}
</script>
<div id="content">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
</div>
<button onclick="clearText();">清除节点内容</button>

其实，也不一定要用逆序。方法2：

<script type="text/javascript">
function clearText() {
var content=document.getElementById("content");
for (var i=0;i<content.childNodes.length;i++){
 var childNode = content.childNodes[0];  //总是删除第一个，是不是更简单
 content.removeChild(childNode);
}
}
</script>
<div id="content">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
</div>
<button onclick="clearText();">清除节点内容</button>

 

转至：http://wangpfsir.blog.163.com/blog/static/67963727201043002658424/