html5中JavaScript删除全部节点

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

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

时间： 2024-09-29 10:22:55

html5中JavaScript删除全部节点的相关文章

openstack中彻底删除计算节点的操作记录

在使用openstack的过程中,我们经常会添加好几台计算节点来部署虚拟机,在后续使用中由于某些原因,一些计算节点出现了问题,需要将这些出了问题的计算节点从openstack的控制节点中踢出去!但是很多时候,在删除计算节点的时候由于删除不彻底而导致了后面使用openstack出现了诸多问题. 下面记录了在openstack中彻底删除计算节点linux-node2.openstack的操作: 在控制节点上操作 查看计算节点 [[email protected] src]# openstack ho

redis cluster中添加删除重分配节点例子

redis cluster配置好,并运行一段时间后,我们想添加节点,或者删除节点,该怎么办呢. 一,redis cluster命令行     //集群(cluster)  CLUSTER INFO 打印集群的信息  CLUSTER NODES 列出集群当前已知的所有节点(node),以及这些节点的相关信息.     //节点(node)  CLUSTER MEET <ip> <port> 将 ip 和 port 所指定的节点添加到集群当中,让它成为集群的一份子.  CLUSTER

javascript删除元素节点

1.删除元素父节点 function removeElement(_element){ var _parentElement = _element.parentNode; if(_parentElement){ _parentElement.removeChild(_element); } } 2.删除元素同级节点nextSibling 属性可返回某个元素之后紧跟的元素(处于同一树层级中).如果无此节点,则属性返回 null.与其相反的是previousSibling语法: nodeObject

javascript删除一个html元素节点代码实例

javascript删除一个html元素节点代码实例:本章节介绍一下如何利用原生javascript实现删除一个指定的html元素.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title&

使用JavaScript操作DOM节点元素的常用方法(创建/删除/替换/复制等)

getElementById(id)这是通过id来访问某一元素,最常用的之一,例:<html><body><div id="myid">test</div><script language="javascript">alert(document.getElementById("myid").innerHTML);</script></body></html&

全栈JavaScript之路（十四）HTML5 中与class属性相关的扩充

1. getElementByClassName() :支持getElementsByClassName()方法的浏览器有IE 9+.Firefox 3+.Safari 3.1+.Chrome 和 Opera 9.5+. 2. classList 属性 :  classList 属性是新集合类型 DOMTokenList  的实例.DOMTokenList 类型有一个lenght 属性 ,表示包含了多少子元素,要取得每一个元素可以通过item() 方法访问,也可以用 [ ] 方法 访问. 此外这

二叉树中删除一个节点

二叉树的删除可以算是二叉树最为复杂的操作,删除的时候要考虑到很多种情况: 1.被删除的节点是叶子节点 2.被删除的节点只有左孩子节点 3.被删除的节点只有右孩子节点 4.被删除的有两个孩子节点 所以在删除的时候,这4种情况都必须考虑进去,并且这4中情况之下,还会有细的划分,下面就细说怎么删除. 在二叉树中想要删除一个节点,首先需要找到这个节点,由于二叉树在插入节点的时候会遵循一个原则,就是利用节点的值来判断 节点将被插入的位置(或者给节点加一个key,用key来判断).从根节点开始往下走,比当前

javascript删除字符串中重复的字符

javascript删除字符串中重复的字符:本章节介绍一下如何删除一个字符串中重复的字符,先不管有没有实际价值,就当做是一种对算法的学习也是挺不错的.代码如下: function dropRepeat(str){ var result=[]; var hash={}; for(var i=0, elem; i<str.length;i++){ elem=str[i]; if(!hash[elem]){ hash[elem]=true; result=result+elem; } } return

javascript与jquery删除元素节点

今天工作的时候遇到一个删除的问题,研究了下发现是没有很好的区分js和jquery的删除方法,在此澄清一下 工作的代码如下 1 // 删除图片 2 $("#js_takePhotoWrap").on("click","a",function(e){ 3 //JS中没有remove()方法!用js的话需要removeChild来删除 4 //this.parentNode.parentNode.removeChild(this.parentNode)