html5中JavaScript removeChild怎么删除所有节点

发布时间：2021-07-27 21:25:02 作者：chen
来源：亿速云阅读：687

这篇文章主要讲解了“html5中JavaScript removeChild怎么删除所有节点”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“html5中JavaScript removeChild怎么删除所有节点”吧！

假设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 removeChild怎么删除所有节点”的内容了，经过本文的学习后，相信大家对html5中JavaScript removeChild怎么删除所有节点这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！

html5中JavaScript removeChild怎么删除所有节点

相关阅读