使用for进行removeChild的注意问题
来源:互联网 发布:淘宝月赚三千 编辑:程序博客网 时间:2024/06/03 23:48
通过JavaScript可以删除所有节点,本文里主要讨论 removeChild 函数,大家可以看看下面的示例
假设div里有这么些内容:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=GBK"> <title>iScroll demo: simple</title> <script type="text/javascript"> function deleteData(){ } </script> <style type="text/css" media="all"> body,ul,li { padding:0; margin:0; border:0; } body { font-size:12px; -webkit-user-select:none; -webkit-text-size-adjust:none; font-family:helvetica; } </style> </head> <body> <div ><input type="submit" name="button" id="button" value="删除li节点" class="button gray" onclick="deleteData()" /> </div> <div > <ul id="thelist"> <li>Pretty row 1</li> <li>Pretty row 2</li> <li>Pretty row 3</li> <li>Pretty row 4</li> <li>Pretty row 5</li> <li>Pretty row 6</li> <li>Pretty row 7</li> <li>Pretty row 8</li> <li>Pretty row 9</li> <li>Pretty row 10</li> <li>Pretty row 40</li> </ul> </div> </body> </html>现在要通过JavaScript的功能,将它们清空。
虽然可以通过一句代码直接实现:
document.getElementById("content").innerHTML=""
但是本文里主要讨论 removeChild 函数。
很想当然地以为借助下面的代码就能完成
function deleteData(){ var el = document.getElementById('thelist'); var liNodes = document.getElementsByTagName("li"); alert(liNodes.length); for(var i = 0; i < liNodes.length; i++){ alert("删除"+i+" liNodes[i]="+ liNodes[i]); el.removeChild(liNodes[i]); //<-- el.removeChild(liNodes[i]); } }
没想到,点击了按钮后,竟然只清除掉1、3、5...,而2、4、6....竟然没有消失,
问题从一开始就产生了:
删除掉第一个节点后,后面节点的顺序全部发生了变化:原来的第二个节点往前蹭,成为新的第一个节点;原来的第三个节点,成为第二个节点……
于是呢,接下来原本是要删除第二个节点的,却将最原始的第三个节点给删除掉了。
最终,并没有全部删除,只删除掉1、3、5,留下了2、4、6。
语法没有错误,但是得不到所要的结果,这就是算法上面的错误!该如何修正呢?
“顺序删除”不行,那就“逆序删除”吧。将 for 语句修改一下
function deleteData(){
var el = document.getElementById('thelist');
var liNodes = document.getElementsByTagName("li");
alert(liNodes.length);
for(var i = liNodes.length-1; i >=0; i--){
alert("删除"+i+" liNodes[i]="+ liNodes[i]);
el.removeChild(liNodes[i]);
//<-- el.removeChild(liNodes[i]);
}
}
试试吧,成功了!还可以使用下面方法
function deleteData() { var el = document.getElementById('thelist'); var liNodes = document.getElementsByTagName("li"); alert(liNodes.length); for (var i=0;i<el.childNodes.length;i++){ var childNode = el.childNodes[0]; //总是删除第一个,是不是更简单 el.removeChild(childNode); } }
完成代码如下所示:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=GBK">
<title>iScroll demo: simple</title>
<script type="text/javascript">
function initData(){
var el = document.getElementById('thelist');
var liNodes = document.getElementsByTagName("li");
alert(liNodes.length);
for(var i = liNodes.length-1; i >=0; i--){
alert("删除"+i+" liNodes[i]="+ liNodes[i]);
el.removeChild(liNodes[i]);
//<-- el.removeChild(liNodes[i]);
}
}
</script>
<style type="text/css" media="all">
body,ul,li {
padding:0;
margin:0;
border:0;
}
body {
font-size:12px;
-webkit-user-select:none;
-webkit-text-size-adjust:none;
font-family:helvetica;
}
</style>
</head>
<body>
<div ><input type="submit" name="button" id="button" value="删除li节点" class="button gray" onclick="initData()" /> </div>
<div >
<ul id="thelist">
<li>Pretty row 1</li>
<li>Pretty row 2</li>
<li>Pretty row 3</li>
<li>Pretty row 4</li>
<li>Pretty row 5</li>
<li>Pretty row 6</li>
<li>Pretty row 7</li>
<li>Pretty row 8</li>
<li>Pretty row 9</li>
<li>Pretty row 10</li>
<li>Pretty row 40</li>
</ul>
</div>
</body>
</html>
- 使用for进行removeChild的注意问题
- 使用removeChild时注意
- 节点的removeChild和addChild使用注意点
- 使用NPO问题进行规约应注意的几个细节
- 使用blueZ进行蓝牙编程时需要注意的问题
- 使用GDI+进行图片处理时要注意的问题
- 使用SPSS进行Logistic Regression时应注意的问题
- 使用GDI+进行图片处理时要注意的问题
- 使用GDI+进行图片处理时要注意的问题
- 如何使用states的RemoveChild 类
- For all entries使用中注意的问题
- 使用增强for循环实现遍历的注意问题
- 使用makefile for语句要注意的问题
- pymongo 对游标进行for循环操作需要注意的问题
- 注意在使用ArrayList进行for循环遍历的时候不能直接移除下标
- removeChild删除表格数据时遇到的问题
- 使用JQuery-easyui的datagrid组件和servlrt进行交互是需要注意的问题
- eclipse不能自动更新的问题;js中的for in使用注意的一点
- Spring-3.2.4 + Quartz-2.2.0集成实例
- 杭电oj-1233-还是畅通工程(并查集加Kruskal算法)
- 适配器模式剖析
- Mac下发布Qt应用程序
- C/C++—— 默认构造函数是否会执行
- 使用for进行removeChild的注意问题
- 下拉刷新、上拉加载更多功能的实现
- 中序和后序生成二叉树
- iOS开发--CocoaPods的安装和使用说明
- ZooKeeper安装与运行
- 一次代码提速过程
- C++之模版应用(顺序表)
- opencv3实现的傅里叶变换
- 对java中synchronized的认识