对于删除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 = '';