html5의 JavaScript RemoveChild는 모든 node_html5 튜토리얼 팁을 삭제합니다.-H5 튜토리얼-php.cn

html5의 JavaScript RemoveChild는 모든 node_html5 튜토리얼 팁을 삭제합니다.

WBOY

풀어 주다： 2016-05-16 15:47:42

원래의

2462명이 탐색했습니다.

假设div里有这么些内容：

复主代码

代码如下:

< ;!DOCTYPE html>

<머리>

iScroll 데모: 간단

<본문>

예쁜 행 1>
예쁜 행 2>
예쁜 3행>
예쁜 4행>
예쁜 5행>
예쁜 6행>
예쁜 7행>
예쁜 8행>
예쁜 9행>
예쁜 행 10>
예쁜 행 40

JavaScript의 功能,将它们清空.

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

document.getElementB yId("content").innerHTML =""

但是本文里主要讨论 RemoveChild 函数。

很想当然地以为借助下면的代码就能完：

复代码码

代码如下:

function deleteData(){
var el = document.getElementById('thelist');
var liNodes = document.getElementsByTagName("li");
경고(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...竟然没有消失，

问题从一开始就产生了：

删除掉第一个节点后，后면节点的顺序전체부发生了变화：원래来的第日个节点往前蹭，成为새로운 제第一个节点;원유적 제3个节点，成为第二个节点…始的第三个节点给删除掉了。

最终，并没有전체부删除，只删除掉1、3、5，留下了2、4、6。

语法没有错误，但是得不到所要的结果，这就是算法上面的错误!该如何修正呢?

“顺序删除”不行，那就“逆序删除”吧。将 for 语句修改一下：

复代码码代码如下:

function deleteData(){

var el = document.getElementById(' 목록');
var liNodes = document.getElementsByTagName("li");
경고(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");
경고(liNodes.length);
for (var i=0;ivar childNode = el.childNodes[0]; //总是删除第一个，是不是更简单
el.removeChild(childNode);
}
}

完成代码如下所示：

复代码如下:

<머리>

iScroll 데모: 간단

<본문>

예쁜 행 1>
예쁜 행 2>
예쁜 3행>
예쁜 4행>
예쁜 5행>
예쁜 6행>
예쁜 7행>
예쁜 8행>
예쁜 9행>
예쁜 행 10>
예쁜 행 40