Entfernen von Elementen aus dem DOM
In diesem Kapitel wird erläutert, wie Elemente aus dem DOM entfernt werden können.
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 Knoten aus dem übergeordneten Knoten. Dafür ist der Zugriff sowohl auf das übergeordnete als auch auf das zu entfernende Kindelement erforderlich.
index.html
index.js
Remove()
Die Methode remove() bietet einen direkteren Ansatz, um ein Element zu entfernen, ohne explizit auf das übergeordnete Element zugreifen zu müssen.
index.html
index.js
Praktisches Beispiel: Dynamischer Aufgabenlisten-Manager
Erstellung einer dynamischen Aufgabenliste, in der Benutzer neue Aufgaben hinzufügen, Aufgaben an bestimmten Positionen einfügen und Aufgaben nach Bedarf entfernen können.
index.html
index.css
index.js
Erstellen und Anhängen neuer Aufgaben:
createElement()wird verwendet, um neue<li>-Elemente und<button>-Elemente dynamisch zu erzeugen, wenn der Benutzer eine neue Aufgabe eingibt;appendChild()fügt die neu erstellte Aufgabe am Ende der Liste hinzu und ermöglicht so das fortlaufende Hinzufügen von Aufgaben, 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 am Anfang der Liste einzufügen. Dies zeigt, wie Elemente an präzisen Positionen innerhalb des Elternelements platziert werden können.
Hinzufügen der Entfernen-Funktionalität:
- Die Funktion
addRemoveFunctionality()fügt jedem Entfernen-Button einer Aufgabe einen Event Listener hinzu, sodass jede Aufgabe gelöscht werden kann, wenn der Button angeklickt wird; - Diese Funktion wird sowohl für bestehende als auch für neu erstellte Aufgaben wiederverwendet, um ein konsistentes Verhalten für alle Aufgaben zu gewährleisten.
Umgang mit bereits vorhandenen Elementen: Bereits vorhandene Aufgaben werden ebenfalls mit der Entfernen-Funktionalität ausgestattet, indem alle aktuellen Entfernen-Buttons ausgewählt und beim Laden der Seite die erforderlichen Event Listener hinzugefügt werden.
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Awesome!
Completion rate improved to 2.22Entfernen von Elementen aus dem DOM
Swipe um das Menü anzuzeigen
In diesem Kapitel wird erläutert, wie Elemente aus dem DOM entfernt werden können.
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 Knoten aus dem übergeordneten Knoten. Dafür ist der Zugriff sowohl auf das übergeordnete als auch auf das zu entfernende Kindelement erforderlich.
index.html
index.js
Remove()
Die Methode remove() bietet einen direkteren Ansatz, um ein Element zu entfernen, ohne explizit auf das übergeordnete Element zugreifen zu müssen.
index.html
index.js
Praktisches Beispiel: Dynamischer Aufgabenlisten-Manager
Erstellung einer dynamischen Aufgabenliste, in der Benutzer neue Aufgaben hinzufügen, Aufgaben an bestimmten Positionen einfügen und Aufgaben nach Bedarf entfernen können.
index.html
index.css
index.js
Erstellen und Anhängen neuer Aufgaben:
createElement()wird verwendet, um neue<li>-Elemente und<button>-Elemente dynamisch zu erzeugen, wenn der Benutzer eine neue Aufgabe eingibt;appendChild()fügt die neu erstellte Aufgabe am Ende der Liste hinzu und ermöglicht so das fortlaufende Hinzufügen von Aufgaben, 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 am Anfang der Liste einzufügen. Dies zeigt, wie Elemente an präzisen Positionen innerhalb des Elternelements platziert werden können.
Hinzufügen der Entfernen-Funktionalität:
- Die Funktion
addRemoveFunctionality()fügt jedem Entfernen-Button einer Aufgabe einen Event Listener hinzu, sodass jede Aufgabe gelöscht werden kann, wenn der Button angeklickt wird; - Diese Funktion wird sowohl für bestehende als auch für neu erstellte Aufgaben wiederverwendet, um ein konsistentes Verhalten für alle Aufgaben zu gewährleisten.
Umgang mit bereits vorhandenen Elementen: Bereits vorhandene Aufgaben werden ebenfalls mit der Entfernen-Funktionalität ausgestattet, indem alle aktuellen Entfernen-Buttons ausgewählt und beim Laden der Seite die erforderlichen Event Listener hinzugefügt werden.
Danke für Ihr Feedback!
