Entfernen Sie alle untergeordneten Elemente mit JavaScript

Das Entfernen von untergeordneten Elementen eines DOM -Elements ist eine kritische Aufgabe für Entwickler. Manchmal muss der Benutzer eine Funktion hinzufügen, die alle Daten aus der eingefügten Liste entfernen. JavaScript erleichtert Entwicklern, indem es vordefinierte Methoden bereitstellt, um dasselbe zu tun.

In diesem Tutorial werden die Methoden erläutert, um alle untergeordneten Elemente eines HTML -Elements mit JavaScript zu entfernen.

So entfernen Sie alle untergeordneten Elemente mit JavaScript?

Verwenden Sie zum Entfernen aller untergeordneten Elemente die folgenden JavaScript -Ansätze

• removechild () Methode
• Innerhtml -Eigenschaft

Lassen Sie uns die Arbeit dieser Ansätze einzeln verstehen.

Methode 1: Entfernen Sie alle untergeordneten Elemente mit der Methode removechild ()

Der "removechild ()Die Methode ist die häufigste JavaScript -Methode zum Entfernen der untergeordneten Elemente der DOM -Elemente. Iterieren Sie die DOM -Elemente mit einer Weile oder für eine Schleife. Bei jeder Iteration wird überprüft, ob im Element ein untergeordneter Knoten übrig ist, und wenn ja, entfernt es einfach ihn.

Syntax
Folgen Sie der unten erwähnten Syntax für die Methode removeChild (), um untergeordnete Elemente eines beliebigen HTML-Elements zu entfernen:

Removechild (Kind)

Hier, "KindIst der untergeordnete Knoten des Elements, das entfernt werden soll.

Beispiel
Erstellen Sie zunächst eine ungeordnete Liste in einer HTML -Datei mit der HTML

Tag, die Listenelemente
• sind die Kinderelemente der ungeordneten Liste. Erstellen Sie dann eine Schaltfläche, indem Sie eine anhängen “ONCLICK"Ereignis, das eine Funktion auslöst, um die untergeordneten Knoten des Elements zu entfernen"ul”:
  
  
  
  
  • Oop
  
  
  • HTML
  
  
  • CSS
  
  
  • JavaScript
  
  
  
  
  Entfernen Sie untergeordnete Elemente der ungeordneten Liste
  

  Um die ungeordnete Liste zu stylen, wird der folgende CSS -Code verwendet:

  .ul
  Anzeige: Inline-Block;
  Text-Align: links;
  

  Die HTML -Seite sieht aus wie:

  Verwenden Sie in der JavaScript -Datei den folgenden Code, um alle untergeordneten Knoten des Elements zu entfernen:

  Funktion removeChildElements ()
  var childelements = document.QuerySelector ("ul");
  var delchild = childelements.letztes Kind;
  while (delchild)
  Kinder.Removechild (Delchild);
  Delchild = Kinder.letztes Kind;
  
  

  Im obigen Code:

  • Definieren Sie zuerst eine Funktion “removechildElements ()”.
  • Holen Sie sich das HTML -Element “ul" Verwendung der "QuerySelector ()" Methode.
  • Iterieren Sie das Element bis zum letzten untergeordneten Knoten und entfernen Sie dann alle mit dem “removechild ()" Methode.

  Ausgang

  Die obige Ausgabe zeigt an, dass alle Elemente in der Liste erfolgreich gelöscht werden, wenn die Schaltfläche klickt.

  Verwenden Sie zum Entfernen nur der erste untergeordnete Knoten des Elements die folgenden Codezeilen:

  Funktion removeChildElements ()
  var childelements = document.QuerySelector ("ul");
  Kinder.Removechild (Kinder.erstes Kind);
  

  Im obigen Code -Snippet

  • Holen Sie sich das HTML -Element “ul"Und übergeben Sie den ersten Kinderknoten an die"removechild ()Methode als Argument.

  Ausgang

  Das erste Kinderelement der ungeordneten Liste ist das einzige, das in der oben angezeigten Ausgabe entfernt wird.

  Methode 2: Entfernen Sie alle untergeordneten Elemente mit der Innerhtml -Eigenschaft

  Ein weiterer Ansatz zum Entfernen aller untergeordneten Knoten eines Elements ist das “Innerhtml" Eigentum.

  Syntax
  Die folgende Syntax wird für die Innerhtml -Eigenschaft verwendet:

  Innerhtml = "

  Die leere Zeichenfolge ist auf die Innerhtml -Eigenschaft gesetzt, die alle untergeordneten Knoten des Elements entfernen.

  Beispiel
  Der untergegebene Code wird zum Entfernen von untergeordneten Knoten mithilfe der Innerhtml-Eigenschaft verwendet:

  Funktion removeChildElements ()
  var childelements = document.QuerySelector ("ul");
  Kinder.innerHtml = "";
  

  Ausgang

  Wir haben die bestmöglichen Ansätze zum Entfernen der untergeordneten Knoten eines Elements mit JavaScript gesammelt.

  Abschluss

  Verwenden Sie die “, um alle untergeordneten Elemente eines DOM -Elements zu entfernenremovechild ()”Methode oder die“Innerhtml" Eigentum. Die Methode removechild () ist eine effektive und häufig verwendete Methode zum Entfernen des untergeordneten Knotens des Elements. Die innere Eigenschaft ist die einfachste Technik. Es zeigt jedoch, dass die Elemente entfernt werden, die Knoten jedoch drinnen bleiben und die Dinge verlangsamen. In diesem Tutorial wurde die Methoden zum Entfernen aller untergeordneten Elemente eines HTML -Elements durch JavaScript erläutert.