Elemente Entfernen

In diesem Kapitel tauchen wir in die Entfernung von Elementen aus dem DOM ein.

Entfernen von Elementen aus dem DOM

Elemente können dynamisch mit Methoden wie removeChild() und remove() entfernt werden.

RemoveChild()

Die Methode removeChild() entfernt einen angegebenen Kindknoten vom Elternknoten. Es erfordert, dass Sie sowohl auf das Elternteil als auch auf das Kind zugreifen, um es zu entfernen.

Remove()

Die remove()-Methode ist ein direkterer Ansatz, um ein Element zu entfernen, ohne explizit auf das übergeordnete Element zugreifen zu müssen.

Praktisches Beispiel: Dynamischer Aufgabenlisten-Manager

Lassen Sie uns eine dynamische Aufgabenliste erstellen, in der Benutzer neue Aufgaben hinzufügen, Aufgaben an bestimmten Positionen einfügen und Aufgaben nach Bedarf entfernen können.

Erstellen und Anhängen neuer Aufgaben:

• createElement() wird verwendet, um neue <li>-Elemente und <button>-Elemente dynamisch zu erstellen, wenn der Benutzer eine neue Aufgabe eingibt;
• appendChild() fügt die neu erstellte Aufgabe am Ende der Liste hinzu, sodass Aufgaben kontinuierlich hinzugefügt werden können, während der Benutzer mit der Liste interagiert.
  

Einfügen von Aufgaben an bestimmten Positionen: Die Schaltfläche "Aufgabe oben einfügen" verwendet insertBefore(), um Aufgaben oben in der Liste hinzuzufügen und zu zeigen, wie Elemente an präzisen Positionen innerhalb des übergeordneten Elements platziert werden können.

Hinzufügen von Entfernen-Funktionalität:

• Die Funktion addRemoveFunctionality() fügt jedem Entfernen-Button einer Aufgabe einen Ereignis-Listener hinzu, sodass jede Aufgabe gelöscht werden kann, wenn der Button geklickt wird;
• Diese Funktion wird sowohl für bestehende als auch für neu erstellte Aufgaben wiederverwendet, um ein konsistentes Verhalten über alle Aufgaben hinweg sicherzustellen.
  

Umgang mit bereits vorhandenen Elementen: Bestehende Aufgaben sind ebenfalls mit Entfernen-Funktionalität ausgestattet, indem alle aktuellen Entfernen-Buttons ausgewählt und die notwendigen Ereignis-Listener beim Laden der Seite hinzugefügt werden.