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

这篇文章主要介绍"html5中怎么用JavaScript removeChild删除所有节点"，在日常操作中，相信很多人在html5中怎么用JavaScript removeChild删除所有节点问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"html5中怎么用JavaScript removeChild删除所有节点"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

现在要通过JavaScript的功能，将它们清空。

虽然可以通过一句代码直接实现：

document.getElementById("content")[xss_clean]=""

但是本文里主要讨论 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

var childNode = el.childNodes[0]; //总是删除第一个，是不是更简单

el.removeChild(childNode);

}

}

完成代码如下所示：

复制代码

代码如下:

到此，关于"html5中怎么用JavaScript removeChild删除所有节点"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！