Kommentar: Alle Knoten können über JavaScript gelöscht werden. In diesem Artikel wird hauptsächlich die Removechild -Funktion erörtert. Sie können sich die folgenden Beispiele ansehen
Angenommen, es gibt etwas im Div:<! DocType html>
<html>
<kopf>
<meta http-äquiv = "content-type" content = "text/html; charSet = gbk">
<title> isCroll Demo: Simple </title>
<script type = "text/javaScript">
Funktion deletedata () {
}
</script>
<style type = "text/css" media = "all">
Körper, ul, li {
Polsterung: 0;
Rand: 0;
Grenze: 0;
}
Körper {
Schriftgröße: 12px;
-Webkit-User-Select: Keine;
-Webkit-text-Größe-Anpassung: Keine;
Schriftfamilie: Helvetica;
}
</style>
</head>
<body>
<Div> <Eingabe type = "subieren" value = "li node delete" /> < /div>
<div>
<ul>
<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>
Jetzt müssen Sie sie durch die Funktionen von JavaScript löschen.
Obwohl es direkt über einen Code -Satz implementiert werden kann:
document.getElementById (Inhalt) .innerhtml =
In diesem Artikel wird jedoch hauptsächlich die Removechild -Funktion erörtert.
Ich hielt es für selbstverständlich, dass es mit Hilfe des folgenden Codes geschehen könnte:
Funktion deletedata () {
var el = document.getElementById ('Thelist');
var linodes = document.getElementsByTagName ("li");
alarm (linodes.length);
für (var i = 0; i <linodes.length; i ++) {
alert ("delete"+i+"linodes [i] ="+linodes [i]);
El.Removechild (Linodes [i]);
// <- El.Removechild (Linodes [i]);
}
}
Unerwartet wurde nach dem Klicken auf die Schaltfläche nur 1, 3, 5 ... gelöscht, während 2, 4, 6 ... nicht verschwunden war.
Das Problem trat von Anfang an auf:
Nach dem Löschen des ersten Knotens hat sich die Reihenfolge der nachfolgenden Knoten geändert: Der ursprüngliche zweite Knoten bewegt sich vorwärts und wird zum neuen ersten Knoten; Der ursprüngliche dritte Knoten wird zum zweiten Knoten ...
Der nächste Schritt bestand also darin, den zweiten Knoten zu löschen, aber der ursprüngliche dritte Knoten wurde gelöscht.
Am Ende wurden nicht alle gelöscht, nur 1, 3, 5 wurden gelöscht, wobei 2, 4 und 6 verließen.
Es gibt keine Fehler in der Syntax, aber das gewünschte Ergebnis wird nicht erhalten. Dies ist der Fehler im Algorithmus! Wie korrigiere ich es?
Wenn Sie es nacheinander löschen, löschen Sie es in umgekehrter Reihenfolge. Ändern Sie die for -Anweisung:
Funktion deletedata () {
var el = document.getElementById ('Thelist');
var linodes = document.getElementsByTagName ("li");
alarm (linodes.length);
für (var i = linodes.length-1; i> = 0; i-) {
alert ("delete"+i+"linodes [i] ="+linodes [i]);
El.Removechild (Linodes [i]);
// <- El.Removechild (Linodes [i]);
}
}
Versuchen Sie es, es gelang es! Sie können auch die folgende Methode verwenden:
Funktion deletedata () {
var el = document.getElementById ('Thelist');
var linodes = document.getElementsByTagName ("li");
alarm (linodes.length);
für (var i = 0; i <el.childnodes.length; i ++) {
var childnode = el.childnodes [0]; // Löschen Sie immer den ersten, ist es nicht einfacher?
El.Removechild (Childnode);
}
}
Der Abschlusscode sieht so aus:
<! DocType html>
<html>
<kopf>
<meta http-äquiv = "content-type" content = "text/html; charSet = gbk">
<title> isCroll Demo: Simple </title>
<script type = "text/javaScript">
Funktion initdata () {
var el = document.getElementById ('Thelist');
var linodes = document.getElementsByTagName ("li");
alarm (linodes.length);
für (var i = linodes.length-1; i> = 0; i-) {
alert ("delete"+i+"linodes [i] ="+linodes [i]);
El.Removechild (Linodes [i]);
// <- El.Removechild (Linodes [i]);
}
}
</script>
<style type = "text/css" media = "all">
Körper, ul, li {
Polsterung: 0;
Rand: 0;
Grenze: 0;
}
Körper {
Schriftgröße: 12px;
-Webkit-User-Select: Keine;
-Webkit-text-Größe-Anpassung: Keine;
Schriftfamilie: Helvetica;
}
</style>
</head>
<body>
<Div> <Eingabe type = "subieren" value = "li node delete" /> < /div>
<div>
<ul>
<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>