Heim >Web-Frontend >H5-Tutorial >JavaScript-RemoveChild in HTML5 löscht alle nodes_html5-Tutorial-Tipps

JavaScript-RemoveChild in HTML5 löscht alle nodes_html5-Tutorial-Tipps

WBOYOriginal: 2016-05-16 15:47:422463Durchsuche

假设div里有这么些内容：

复制代码

代码如下:

< ;!DOCTYPE html>

iScroll-Demo: einfach

Hübsche Reihe 1

Hübsche Reihe 2

Hübsche Reihe 3

Hübsche Reihe 4

Hübsche Reihe 5

Hübsche Reihe 6

Hübsche Reihe 7

Hübsche Reihe 8

Hübsche Reihe 9

Hübsche Reihe 10

Hübsche Reihe 40

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

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

document.getElementById("content").innerHTML ="" 🎜>

复制代码

代码如下:

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...竟然没有消失，

问题从一开始就产生了：

删除掉第一个节点后,后面节点的顺序全部发生了变化:原来的第二个节点往前蹭，成为新的第一个节点；原来的第三个节点,成为第二个节点……

于是呢,接下来原本是要删除第二个节点的,却将最原始的第三个删除掉了误, 但是得不到所要的结果，这就是算法上面的错误！该如何修正呢？

“顺序删除“不行，那就“逆序删除”吧。将 für 语句修改一下:

复制代码

代码如下:

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;ivar childNode = el.childNodes[0]; //总是删除第一个，是不是更简单 el.removeChild(childNode); }

}

完成代码如下所示:

复制代码

代码如下:

iScroll-Demo: einfach

Hübsche Reihe 1

Hübsche Reihe 2

Hübsche Reihe 3

Hübsche Reihe 4

Hübsche Reihe 5

Hübsche Reihe 6

Hübsche Reihe 7

Hübsche Reihe 8

Hübsche Reihe 9

Hübsche Reihe 10

Hübsche Reihe 40

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Beispielcode für das Erstellen eines Canvas-Elements in HTML5_HTML5-Tutorial-FähigkeitenNächster Artikel：Beispielcode für das Erstellen eines Canvas-Elements in HTML5_HTML5-Tutorial-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen