注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

淡淡De影痕的博客

将来的你一定会感激现在拼命的自己。

 
 
 

日志

 
 
 
 

一个删除节点的小问题  

2014-08-07 09:41:32|  分类: JS初心向小结 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
今天在答疑时碰到了一个for循环删除子节点的问题,一开始删除的结果让我很意外咱们来看看是怎么回事。
一.奇葩的结果

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
width:200px;
height:220px;
border:1px solid red;
}
.str{
width:200px;
height:20px;
background-color:red;
margin-top: 2px;
}
</style>
</head>
<body>
<input type="button" id="btn1" value="增加">
<input type="button" id="btn2" value="删除">
<div id="div1">
</div>
<script>
var oBtn=document.getElementById('btn1');

var btn2 = document.getElementById("btn2");
var oDiv=document.getElementById('div1');
oBtn.onclick=function(){
var nEw=document.createElement('div');
nEw.setAttribute("class","str")
oDiv.appendChild(nEw);
}
btn2.onclick=function(){
for(var i=0;i<=oDiv.children.length;i++){
oDiv.removeChild(oDiv.children[i])
}
}
</script>
</body>
</html>

插入节点没有问题,咱们以插入6个节点为例。
一个删除节点的小问题 - 淡淡De影痕 - 淡淡De影痕的博客
点击删除按钮后情况是这样的
一个删除节点的小问题 - 淡淡De影痕 - 淡淡De影痕的博客

 能发现for循环后并没有将子元素完全删除掉,只是删掉了一半为什么呢?
 原因很简单,咱们在for循环中的判定条件有问题。当你每删除一个子节点时,oDiv.childNodes.length都会减小一。直到你删掉一半节点后,for循环中的条件也减小到了原来的一半所以for循环停止了。改进方案如下~


二.解决方案

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
width:200px;
height:220px;
border:1px solid red;
}
.str{
width:200px;
height:20px;
background-color:red;
margin-top: 2px;
}
</style>
</head>
<body>
<input type="button" id="btn1" value="增加">
<input type="button" id="btn2" value="删除">
<div id="div1">
</div>
<script>
var oBtn=document.getElementById('btn1');

var btn2 = document.getElementById("btn2");
var oDiv=document.getElementById('div1');
oBtn.onclick=function(){
var nEw=document.createElement('div');
nEw.setAttribute("class","str")
oDiv.appendChild(nEw);
}
btn2.onclick=function(){
for(var i=0;i<=oDiv.children.length;i++){
i = 0;
oDiv.removeChild(oDiv.children[i])
}
}
</script>
</body>
</html>


 欢迎大家交流指正~  淡淡De影痕
 

  评论这张
 
阅读(48)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018