html5中JavaScript removeChild 删除所有节点
html5中JavaScript removeChild 删除所有节点
发布时间:2016-12-27 来源:查字典编辑
摘要:假设div里有这么些内容:iScrolldemo:simplefunctiondeleteData(){}body,ul,li{paddin...

假设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 >=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节点" /> </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>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新HTML5教程学习
热门HTML5教程学习
网页设计子分类