removeChild删除表格数据时遇到的问题

对于删除HTML DOM元素节点这个简单的问题，JavaScript的一些框架和库都提供了一些很好用的方法，但是原生的方法只用removeChild()，removeChild()用法很简单，如下:

var node = document.getElementById('eleId');//要删除的元素节点
node.parentNode.removeChild(node);//通过node的父节点调用removeChild()即可

但是，在我想用removeChild实现删除table标签中的所有子元素时，遇到了问题，代码如下：

var ta = document.getElementById('myTable');
var cdNodes = ta.childNodes;//得到table的所有子节点
for(var i = 0 ; i < cdNodes.length ; i ++){
ta.removeChild(cdNodes[i]);
}

上述代码执行后，却没有按照我期望的那样删除table中的子节点，经过调试并查了一些资料后发现：

如果按上述代码执行，从第一个子节点删除，那么这个循环只能执行一次，也就是只能删除cdNodes[0]，应该是因为从头删除子节点会改变cdNodes数组的结构，第二个节点之后的节点会自动向前移，当需要删除原来cdNodes数组中的cdNodes[1]时，它已经变成了cdNodes[0]，当再执行ta.removeChild(cdNodes[1])时，删除的已经是原来cdNodes中的第三个元素即cdNodes[2]，那么cdNodes[1]就删不掉了。

可以通过如下两种方式解决：

1.顺序删除

var ta = document.getElementById('myTable');
var cdNodes = ta.childNodes;//得到table的所有子节点
var l = cdNodes.length;//事先保存cdNodes的初始长度
for(var i = 0 ; i < l ; i ++){
ta.removeChild(cdNodes[0]);//循环删除当前的第一个元素
}

2.逆序删除

var ta = document.getElementById('myTable');
var cdNodes = ta.childNodes;//得到table的所有子节点
for(var i = cdNodes.length -1; i >= 0  ; i --){
ta.removeChild(cdNodes[i]);
}//逆序删除，就不会影响cdNodes数组前边的元素结构

附：还有一种不用removeChild()实现的简单方法：

var ta = document.getElementById('myTable');
ta.innerHTML = '';