html5中JavaScript removeChild 删除所有节点
导读：收集整理的这篇文章主要介绍了html5中JavaScript removeChild 删除所有节点，觉得挺不错的，现在分享给大家，也给大家做个参考。 假设div里有这么些内容： 复制代码代码如下: <!DOCTYPE htM...
收集整理的这篇文章主要介绍了html5中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; iel.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>
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： html5中JavaScript removeChild 删除所有节点
本文地址： https://pptw.com/jishu/585353.html