码迷,mamicode.com
首页 > 编程语言 > 详细

html5中JavaScript删除全部节点

时间:2019-04-28 09:49:09      阅读:522      评论:0      收藏:0      [点我收藏+]

标签:head   web   inpu   pre   css   track   直接   led   nim   

如果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>


html5中JavaScript删除全部节点

标签:head   web   inpu   pre   css   track   直接   led   nim   

原文地址:https://www.cnblogs.com/ldxsuanfa/p/10781655.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
分享档案
周排行
mamicode.com排行更多图片
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!