JavaScript/DOM/Node/removeChild

Die Methode removeChild löscht aus einem Element einen Kindknoten.

Syntax:

var 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).

Anwendungsbeispiel

Beispiel ansehen …

    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 immer über den Elternknoten gehen.

Entfernen eines Elements aus dem DOM

// Identifizieren des Kindknotens
var element = document.getElementById('id');

// Aufruf des Elternknotens, um dann dessen Kindknoten zu löschen
element.parentNode.removeChild(element);

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

Beispiel ansehen …

    function klickFunktionalität (){
      var elem = document.getElementById('main');
      elem.addEventListener('click', elementEntfernen);	
    }
	
    function elementEntfernen(e) {
      var elem = e.target;
	  var main = document.getElementById('main');
	  if (main != elem) {
        var parent = elem.parentNode;
        parent.removeChild(elem);
        return false;
	  }
    }

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

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.

Element.remove

Die Element.remove()-Methode entfernt ein Objekt aus dem DOM.

Sie ist eine Methode der ChildNode-Schnittstelle, die Node-Objekte umfasst, die Elternelemente haben können. Diese Schnittstelle hat keine vererbten oder eigenen Eigenschaften.

ChildNode.remove

elementNodeReference.remove();

Das obige Beispiel würde so aussehen:

Entfernen eines geklickten Elements

    function elementEntfernen(e) {
      var elem = e.target;
	  var main = document.getElementById('main');
	  if (main != elem) {
            elem.remove(); 
            return false;
          }
    }

Da die Methode nicht auf den Elternknoten zugreifen muss, würde man sich hier 1 Zeile Code sparen.

Weblinks

• W3C: DOM Level 3 node.removeChild
• MDN : node.removeChild