html5中JavaScript removeChild 删除所有节点

程序员文章站 2023-11-13 08:04:10

通过JavaScript可以删除所有节点，本文里主要讨论 removeChild 函数，大家可以看看下面的示例... 14-05-16...

假设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>

上一篇： HTML 5 input placeholder 属性如何完美兼任ie

下一篇： HTML5新增元素如何兼容旧浏览器有哪些方法

html5中JavaScript removeChild 删除所有节点