微学网

热门关键词:   as  thinkphp  ecshop  xxx  商务通  www.ymwears.cn
热门: ASP.NET PHP编程 ASP编程 JSP编程 Python

html5中JavaScript removeChild 删除所有节点

发布时间:2017-05-13 来源:未知 点击:
点评:通过JavaScript可以删除所有节点,本文里主要讨论 removeChild 函数,大家可以看看下面的示例假设div里有这么些内容: nP9HTML5中文学习网 - HTML5先行者学习网

代码如下: nP9HTML5中文学习网 - HTML5先行者学习网
<!DOCTYPE html> nP9HTML5中文学习网 - HTML5先行者学习网
<html> nP9HTML5中文学习网 - HTML5先行者学习网
<head> nP9HTML5中文学习网 - HTML5先行者学习网
<meta http-equiv="Content-Type" content="text/html;charset=GBK"> nP9HTML5中文学习网 - HTML5先行者学习网
<title>iScroll demo: simple</title> nP9HTML5中文学习网 - HTML5先行者学习网
<script type="text/javascript"> nP9HTML5中文学习网 - HTML5先行者学习网
function deleteData(){ nP9HTML5中文学习网 - HTML5先行者学习网
} nP9HTML5中文学习网 - HTML5先行者学习网
</script> nP9HTML5中文学习网 - HTML5先行者学习网
<style type="text/css" media="all"> nP9HTML5中文学习网 - HTML5先行者学习网
body,ul,li { nP9HTML5中文学习网 - HTML5先行者学习网
padding:0; nP9HTML5中文学习网 - HTML5先行者学习网
margin:0; nP9HTML5中文学习网 - HTML5先行者学习网
border:0; nP9HTML5中文学习网 - HTML5先行者学习网
} nP9HTML5中文学习网 - HTML5先行者学习网
body { nP9HTML5中文学习网 - HTML5先行者学习网
font-size:12px; nP9HTML5中文学习网 - HTML5先行者学习网
-webkit-user-select:none; nP9HTML5中文学习网 - HTML5先行者学习网
-webkit-text-size-adjust:none; nP9HTML5中文学习网 - HTML5先行者学习网
font-family:helvetica; nP9HTML5中文学习网 - HTML5先行者学习网
} nP9HTML5中文学习网 - HTML5先行者学习网
</style> nP9HTML5中文学习网 - HTML5先行者学习网
</head> nP9HTML5中文学习网 - HTML5先行者学习网
<body> nP9HTML5中文学习网 - HTML5先行者学习网
<div ><input type="submit" name="button" id="button" value="删除li节点" class="button gray" onclick="deleteData()" /> </div> nP9HTML5中文学习网 - HTML5先行者学习网
<div > nP9HTML5中文学习网 - HTML5先行者学习网
<ul id="thelist"> nP9HTML5中文学习网 - HTML5先行者学习网
<li>Pretty row 1</li> nP9HTML5中文学习网 - HTML5先行者学习网
<li>Pretty row 2</li> nP9HTML5中文学习网 - HTML5先行者学习网
<li>Pretty row 3</li> nP9HTML5中文学习网 - HTML5先行者学习网
<li>Pretty row 4</li> nP9HTML5中文学习网 - HTML5先行者学习网
<li>Pretty row 5</li> nP9HTML5中文学习网 - HTML5先行者学习网
<li>Pretty row 6</li> nP9HTML5中文学习网 - HTML5先行者学习网
<li>Pretty row 7</li> nP9HTML5中文学习网 - HTML5先行者学习网
<li>Pretty row 8</li> nP9HTML5中文学习网 - HTML5先行者学习网
<li>Pretty row 9</li> nP9HTML5中文学习网 - HTML5先行者学习网
<li>Pretty row 10</li> nP9HTML5中文学习网 - HTML5先行者学习网
<li>Pretty row 40</li> nP9HTML5中文学习网 - HTML5先行者学习网
</ul> nP9HTML5中文学习网 - HTML5先行者学习网
</div> nP9HTML5中文学习网 - HTML5先行者学习网
</body> nP9HTML5中文学习网 - HTML5先行者学习网
</html> nP9HTML5中文学习网 - HTML5先行者学习网
nP9HTML5中文学习网 - HTML5先行者学习网
现在要通过JavaScript的功能,将它们清空。 nP9HTML5中文学习网 - HTML5先行者学习网
nP9HTML5中文学习网 - HTML5先行者学习网
虽然可以通过一句代码直接实现: nP9HTML5中文学习网 - HTML5先行者学习网
nP9HTML5中文学习网 - HTML5先行者学习网
document.getElementById("content").innerHTML="" nP9HTML5中文学习网 - HTML5先行者学习网
nP9HTML5中文学习网 - HTML5先行者学习网
但是本文里主要讨论 removeChild 函数。 nP9HTML5中文学习网 - HTML5先行者学习网
nP9HTML5中文学习网 - HTML5先行者学习网
很想当然地以为借助下面的代码就能完成: nP9HTML5中文学习网 - HTML5先行者学习网

代码如下: nP9HTML5中文学习网 - HTML5先行者学习网
function deleteData(){ nP9HTML5中文学习网 - HTML5先行者学习网
var el = document.getElementById('thelist'); nP9HTML5中文学习网 - HTML5先行者学习网
var liNodes = document.getElementsByTagName("li"); nP9HTML5中文学习网 - HTML5先行者学习网
alert(liNodes.length); nP9HTML5中文学习网 - HTML5先行者学习网
for(var i = 0; i < liNodes.length; i++){ nP9HTML5中文学习网 - HTML5先行者学习网
alert("删除"+i+" liNodes[i]="+ liNodes[i]); nP9HTML5中文学习网 - HTML5先行者学习网
el.removeChild(liNodes[i]); nP9HTML5中文学习网 - HTML5先行者学习网
//<-- el.removeChild(liNodes[i]); nP9HTML5中文学习网 - HTML5先行者学习网
} nP9HTML5中文学习网 - HTML5先行者学习网
} nP9HTML5中文学习网 - HTML5先行者学习网
nP9HTML5中文学习网 - HTML5先行者学习网
没想到,点击了按钮后,竟然只清除掉1、3、5...,而2、4、6....竟然没有消失, nP9HTML5中文学习网 - HTML5先行者学习网
nP9HTML5中文学习网 - HTML5先行者学习网
问题从一开始就产生了: nP9HTML5中文学习网 - HTML5先行者学习网
nP9HTML5中文学习网 - HTML5先行者学习网
删除掉第一个节点后,后面节点的顺序全部发生了变化:原来的第二个节点往前蹭,成为新的第一个节点;原来的第三个节点,成为第二个节点…… nP9HTML5中文学习网 - HTML5先行者学习网
nP9HTML5中文学习网 - HTML5先行者学习网
于是呢,接下来原本是要删除第二个节点的,却将最原始的第三个节点给删除掉了。 nP9HTML5中文学习网 - HTML5先行者学习网
nP9HTML5中文学习网 - HTML5先行者学习网
最终,并没有全部删除,只删除掉1、3、5,留下了2、4、6。 nP9HTML5中文学习网 - HTML5先行者学习网
nP9HTML5中文学习网 - HTML5先行者学习网
语法没有错误,但是得不到所要的结果,这就是算法上面的错误!该如何修正呢? nP9HTML5中文学习网 - HTML5先行者学习网
nP9HTML5中文学习网 - HTML5先行者学习网
“顺序删除”不行,那就“逆序删除”吧。将 for 语句修改一下: nP9HTML5中文学习网 - HTML5先行者学习网

代码如下: nP9HTML5中文学习网 - HTML5先行者学习网
function deleteData(){ nP9HTML5中文学习网 - HTML5先行者学习网
var el = document.getElementById('thelist'); nP9HTML5中文学习网 - HTML5先行者学习网
var liNodes = document.getElementsByTagName("li"); nP9HTML5中文学习网 - HTML5先行者学习网
alert(liNodes.length); nP9HTML5中文学习网 - HTML5先行者学习网
for(var i = liNodes.length-1; i >=0; i--){ nP9HTML5中文学习网 - HTML5先行者学习网
alert("删除"+i+" liNodes[i]="+ liNodes[i]); nP9HTML5中文学习网 - HTML5先行者学习网
el.removeChild(liNodes[i]); nP9HTML5中文学习网 - HTML5先行者学习网
//<-- el.removeChild(liNodes[i]); nP9HTML5中文学习网 - HTML5先行者学习网
} nP9HTML5中文学习网 - HTML5先行者学习网
} nP9HTML5中文学习网 - HTML5先行者学习网
nP9HTML5中文学习网 - HTML5先行者学习网
试试吧,成功了!还可以使用下面方法: nP9HTML5中文学习网 - HTML5先行者学习网

代码如下: nP9HTML5中文学习网 - HTML5先行者学习网
function deleteData() { nP9HTML5中文学习网 - HTML5先行者学习网
var el = document.getElementById('thelist'); nP9HTML5中文学习网 - HTML5先行者学习网
var liNodes = document.getElementsByTagName("li"); nP9HTML5中文学习网 - HTML5先行者学习网
alert(liNodes.length); nP9HTML5中文学习网 - HTML5先行者学习网
for (var i=0;i<el.childNodes.length;i++){ nP9HTML5中文学习网 - HTML5先行者学习网
var childNode = el.childNodes[0]; //总是删除第一个,是不是更简单 nP9HTML5中文学习网 - HTML5先行者学习网
el.removeChild(childNode); nP9HTML5中文学习网 - HTML5先行者学习网
} nP9HTML5中文学习网 - HTML5先行者学习网
} nP9HTML5中文学习网 - HTML5先行者学习网
nP9HTML5中文学习网 - HTML5先行者学习网
完成代码如下所示: nP9HTML5中文学习网 - HTML5先行者学习网

代码如下: nP9HTML5中文学习网 - HTML5先行者学习网
<!DOCTYPE html> nP9HTML5中文学习网 - HTML5先行者学习网
<html> nP9HTML5中文学习网 - HTML5先行者学习网
<head> nP9HTML5中文学习网 - HTML5先行者学习网
<meta http-equiv="Content-Type" content="text/html;charset=GBK"> nP9HTML5中文学习网 - HTML5先行者学习网
<title>iScroll demo: simple</title> nP9HTML5中文学习网 - HTML5先行者学习网
<script type="text/javascript"> nP9HTML5中文学习网 - HTML5先行者学习网
function initData(){ nP9HTML5中文学习网 - HTML5先行者学习网
var el = document.getElementById('thelist'); nP9HTML5中文学习网 - HTML5先行者学习网
var liNodes = document.getElementsByTagName("li"); nP9HTML5中文学习网 - HTML5先行者学习网
alert(liNodes.length); nP9HTML5中文学习网 - HTML5先行者学习网
for(var i = liNodes.length-1; i >=0; i--){ nP9HTML5中文学习网 - HTML5先行者学习网
alert("删除"+i+" liNodes[i]="+ liNodes[i]); nP9HTML5中文学习网 - HTML5先行者学习网
el.removeChild(liNodes[i]); nP9HTML5中文学习网 - HTML5先行者学习网
//<-- el.removeChild(liNodes[i]); nP9HTML5中文学习网 - HTML5先行者学习网
} nP9HTML5中文学习网 - HTML5先行者学习网
} nP9HTML5中文学习网 - HTML5先行者学习网
</script> nP9HTML5中文学习网 - HTML5先行者学习网
<style type="text/css" media="all"> nP9HTML5中文学习网 - HTML5先行者学习网
body,ul,li { nP9HTML5中文学习网 - HTML5先行者学习网
padding:0; nP9HTML5中文学习网 - HTML5先行者学习网
margin:0; nP9HTML5中文学习网 - HTML5先行者学习网
border:0; nP9HTML5中文学习网 - HTML5先行者学习网
} nP9HTML5中文学习网 - HTML5先行者学习网
body { nP9HTML5中文学习网 - HTML5先行者学习网
font-size:12px; nP9HTML5中文学习网 - HTML5先行者学习网
-webkit-user-select:none; nP9HTML5中文学习网 - HTML5先行者学习网
-webkit-text-size-adjust:none; nP9HTML5中文学习网 - HTML5先行者学习网
font-family:helvetica; nP9HTML5中文学习网 - HTML5先行者学习网
} nP9HTML5中文学习网 - HTML5先行者学习网
</style> nP9HTML5中文学习网 - HTML5先行者学习网
</head> nP9HTML5中文学习网 - HTML5先行者学习网
<body> nP9HTML5中文学习网 - HTML5先行者学习网
<div ><input type="submit" name="button" id="button" value="删除li节点" class="button gray" onclick="initData()" /> </div> nP9HTML5中文学习网 - HTML5先行者学习网
<div > nP9HTML5中文学习网 - HTML5先行者学习网
<ul id="thelist"> nP9HTML5中文学习网 - HTML5先行者学习网
<li>Pretty row 1</li> nP9HTML5中文学习网 - HTML5先行者学习网
<li>Pretty row 2</li> nP9HTML5中文学习网 - HTML5先行者学习网
<li>Pretty row 3</li> nP9HTML5中文学习网 - HTML5先行者学习网
<li>Pretty row 4</li> nP9HTML5中文学习网 - HTML5先行者学习网
<li>Pretty row 5</li> nP9HTML5中文学习网 - HTML5先行者学习网
<li>Pretty row 6</li> nP9HTML5中文学习网 - HTML5先行者学习网
<li>Pretty row 7</li> nP9HTML5中文学习网 - HTML5先行者学习网
<li>Pretty row 8</li> nP9HTML5中文学习网 - HTML5先行者学习网
<li>Pretty row 9</li> nP9HTML5中文学习网 - HTML5先行者学习网
<li>Pretty row 10</li> nP9HTML5中文学习网 - HTML5先行者学习网
<li>Pretty row 40</li> nP9HTML5中文学习网 - HTML5先行者学习网
</ul> nP9HTML5中文学习网 - HTML5先行者学习网
</div> nP9HTML5中文学习网 - HTML5先行者学习网
</body> nP9HTML5中文学习网 - HTML5先行者学习网
</html> nP9HTML5中文学习网 - HTML5先行者学习网
nP9HTML5中文学习网 - HTML5先行者学习网

这就是微学网-程序员之家为你提供的"html5中JavaScript removeChild 删除所有节点"希望对你有所帮助.本文来自网络,转载请注明出处:http://www.weixuecn.cn/article/6762.html
网络编程 | 前端制作 | 数据库 | CMS教程 | 脚本编程 | 框架 | 服务器 | 微信开发 | APP开发 | 学习教程 |

凡本网站转载的文章、图片等资料的版权归版权所有人所有,因无法和版权所有者一一联系,如果本网站选取的文/图威胁到您的权益,请您及时和本网站联系。 我们会在第一时间内采取措施,避免给双方造 成不必要的损失。
© 2015-2021 微学网 版权所有,并保留所有权利。 备案号:粤ICP备09051474号-1

菜鸟学习网,提供各类程序编程入门,技巧