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 = '';
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值