html5中JavaScript removeChild 删除所有节点

2020-03-24 18:19:50

字体：大中小

来源：转载

供稿：网友

假设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节点" / /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 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 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节点" / /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
html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：html怎么引入js

下一篇：网页中的图片查看器viewjs使用