Heim > Web-Frontend > js-Tutorial > Javascript-Methode „removeChild()' zum Löschen von Knoten und zum Löschen untergeordneter Knoten_Javascript-Fähigkeiten

Javascript-Methode „removeChild()' zum Löschen von Knoten und zum Löschen untergeordneter Knoten_Javascript-Fähigkeiten

WBOY
Freigeben: 2016-05-16 15:23:08
Original
2345 Leute haben es durchsucht

Im Folgenden erfahren Sie, wie Sie Knoten mithilfe von Javascript „removeChild()“ löschen. Die spezifischen Details lauten wie folgt:

In Javascript gibt es nur eine Methode zum Löschen von Knoten: removeChild().

Die Methode

removeChild() wird verwendet, um einen untergeordneten Knoten des übergeordneten Knotens zu löschen.

Grammatik:

parent.removeChild(thisNode)

Parameterbeschreibung:

参数 说明
thisNode 当前节点,即要删除的节点
parent 当前节点的父节点,即 thisNode.parentNode

Zum Beispiel lautet die Anweisung zum Löschen des Knotens mit der ID="demo":

var thisNode=document.getElementById("demo");
thisNode.parentNode.removeNode(thisNode);
Nach dem Login kopieren

Zum Beispiel Knoten löschen:

<div id="demo">
  <div id="thisNode">点击删除我</div>
</div>
<script type="text/javascript">
document.getElementById("thisNode").onclick=function(){
  this.parentNode.removeChild(this);
}
</script>
Nach dem Login kopieren

Beispieldemonstration:

Es ist ersichtlich, dass Javascript zwar nur eine Methode zum Löschen von Knoten bereitstellt, diese jedoch ausreicht.

ps: JavaScript-Methode zum Löschen untergeordneter Knoten

Der HTML-Code lautet wie folgt:

<div id="f"> 
 <div>a</div> 
 <div>b</div> 
 <div>c</div> 
</div> 
Nach dem Login kopieren

Wenn Sie alle untergeordneten Knoten unter dem f-Knoten löschen möchten, sollte die natürliche und normale Methode, die Ihnen in den Sinn kommt, der folgende Code sein:

var f = document.getElementById("f"); 
var childs = f.childNodes; 
for(var i = 0; i < childs.length; i++) { 
  alert(childs[i].nodeName); 
  f.removeChild(childs[i]); 
} 
Nach dem Login kopieren

Als das Programm ausgeführt wurde, stellten wir fest, dass, egal ob unter Firefox oder IE, nicht alle untergeordneten Knoten vollständig gelöscht werden konnten (der leere Bereich wurde auch in FireFox gelöscht
). Dies liegt daran, dass beim Löschen des untergeordneten Knotens mit Index 0 der ursprüngliche Index natürlich
ist Zu diesem Zeitpunkt wird der Index des Knotens, der 1 ist, zu 0, und zu diesem Zeitpunkt ist die Variable i zu 1 geworden. Wenn das Programm fortfährt, löscht es den Knoten mit dem ursprünglichen Index von 2 und ist jetzt 1. In diesem Das Ergebnis der Ausführung des Programms ist, dass nur der Knoten gelöscht wird. Für die Hälfte der untergeordneten Knoten ist das Ergebnis des Durchlaufens mit for in dasselbe. Möchten Sie alle Knoten normal löschen
Wenn ja, sollten wir von hinten nach vorne löschen, der Code lautet wie folgt:

for(var i = childs.length - 1; i >= 0; i--) { 
  alert(childs[i].nodeName); 
  f.removeChild(childs[i]); 
} 
Nach dem Login kopieren

Wir beginnen mit dem Löschen ab dem maximalen Indexwert und verwenden dabei die abnehmende Methode, damit sich der Index nicht verschiebt oder ändert.

Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage