JavaScript/DOM/Node/removeChild

Die Methode Node.removeChild löscht einen Kindknoten eines Elementknoten aus dem DOM.

Syntax:

let entferntesKind = element.removeChild(child);

element.removeChild(child);

• child: der Kindknoten, der aus dem DOM entfernt wird.
• element: Elternknoten von child
• entferntesKind: behält im Speicher eine Referenz auf das gelöschte Element (entferntesKind === child)

Wenn Sie die obere Syntax verwenden, wird der Kindknoten aus dem DOM entfernt, bleibt aber im Speicher erhalten und kann später über die entferntesKind-Objektreferenz angesprochen werden.

In der unteren Syntax existiert keine Referenz und der nicht mehr sichtbare Kindknoten wird nach kurzer Zeit auch aus dem Speicher entfernt.

Wenn child kein Kind des Knotens element ist, wirft die Methode einen Ausnahmefehler (exception).

Beispiel: Anwendungsbeispiel So sieht's ausQuellcode

    function wegMitEintrag () {
      var knoten = document.getElementsByTagName('ol')[0];
      var verschwunden = knoten.removeChild(knoten.firstChild);
      ausgabe(verschwunden.firstChild.nodeValue + ' wurde gelöscht!')
    }
	
    function ausgabe(text){
      var container = document.getElementById('textblock');
      var absatzNeu = document.createElement('p');
      absatzNeu.innerHTML = text;
      container.appendChild(absatzNeu);
    }
	
    function klickFunktionalität (){
      var elem = document.getElementById('button');
      elem.addEventListener('click', wegMitEintrag);	
    }

    document.addEventListener('DOMContentLoaded', klickFunktionalität);

<ol start="1" type="I"><li>Element 1</li><li>Element 2</li><li>Element 3</li><li>Element 4</li></ol>

Das Beispiel enthält eine nummerierte Liste. Beim Anklicken des Buttons wird die Funktion wegMitEintrag() aufgerufen. In dieser Funktion wird auf den ersten Kindknoten mit document.getElementsByTagName('ol')[0] zugegriffen. Der Wert wird in der Variablen knoten gespeichert.

Mit removeChild(knoten) wird der Listenpunkt gelöscht. Dabei wird der Methode als Parameter der zu löschende Knoten übergeben. Die Methode removeChild() gibt als Rückgabewert das gelöschte Element zurück. Dieser Wert ist im Beispiel in der globalen Variablen verschwunden gespeichert. Über diese Variable können Sie weiterhin auf die Eigenschaften des Knotens zugreifen. So wird im Beispiel noch einmal der Inhalt des ersten Kindknotens des gelöschten Elements ausgegeben.

Beachten Sie, dass die Kindelemente der sortierten Liste direkt hintereinander notiert wurden. Wenn Sie die normale Schreibweise verwenden, haben Sie Leerzeichen und Zeilenumbrüche im HTML-Code.
Dieser Whitespace wird vom DOM als Textknoten geparst. Mit einer normalen Schreibweise müsste also der Button zweimal gedrückt werden, um zuerst den Whitespace und dann das li-Element zu entfernen.

Ein Element enfernen

Um in JavaScript ein Element aus dem DOM zu entfernen, müssen Sie bei removeChild immer über den Elternknoten gehen.

Mit der parentNode-Eigenschaft können Sie den Elternknoten automatisch finden und verwenden.

Beispiel: Mach das weg! - parentNode.removeChild() So sieht's ausQuellcode

	document.body.addEventListener('click', removeElement);

	function removeElement(e) {
		let elem = e.target;
		const main = document.querySelector('main');
		if (main != elem) {
			elem.parentNode.removeChild(elem);
			return false;
		}
	}

In diesem Beispiel können Sie einzelne Elemente aus der Webseite löschen. Dafür wird mit event.target ermittelt, in welchem Element das Ereignis aufgetreten ist und dieser Wert der Variable elem zugewiesen.

Damit nicht die gesamte Seite gelöscht wird, überprüft man in einer bedingten Anweisung, ob das geklickte Ereignis im main-Element auftrat.

Bei allen anderen Elementen wird mit parentNode der Elternknoten ermittelt und dann mit removeChild(elem) das angeklickte Element entfernt.

Siehe auch

Mit den Eigenschaften des Node-Objekts werden alle Knoten - auch Textknoten (evtl. sogar mit Whitespace) - ermittelt. Meist will man aber nur Elementknoten ansprechen. Hier haben andere Schnittstellen bessere Methoden, die das Gewünschte erreichen:

parentNode→parentElementpreviousSibling→previousElementSiblingnextSibling → nextElementSiblingchildNodes→children (alle Kindelemente)firstChild→firstElementChildlastChild→lastElementChild

element.parentNode.removeChild → Element.remove

• 

  Was ist das DOM?
  • Baumstruktur
  • Elementknoten ansprechen
  • Textknoten ansprechen
   
• DOM-Manipulation
  • Elemente dynamisch
    • erzeugen
    • entfernen
   
• 

  DOM-Traversal

  Den Elementbaum rauf und runter klettern!