Removing Elements from the DOM

Um ein Element aus dem DOM zu entfernen, müssen wir es zuerst mit querySelector auswählen, dann können wir es mit parentNode.removeChild löschen:

parentElement.removeChild(newElement, referenceElement);

Angenommen, wir wollen Jen Simmons aus der Liste löschen:

<ol>
  <li>Rachel Andrew</li>
  <li>Jen Simmons</li>
  <li>Una Kravets</li>
</ol>

Wir wählen zuerst Jen mit querySelector, dann löschen wir sie mit removeChild:

const jen = document.querySelectorAll('ol > li')[1];
jen.parentNode.removeChild(jen);

Ergebnis:

<ol>
  <li>Rachel Andrew</li>
  <li>Una Kravets</li>
</ol>

Moving the HTML-Element

Nun wollen wir Jen natürlich nicht wirklich aus der Liste löschen, wir wollen sie nur verschieben. Wegen möglicher unerwünschter Nebenwirkungen ist die Vorgangsweise “zuerst löschen, dann an der neuen Stelle wieder einfügen” der Weg der Wahl.

Wenn Jen an erster Stelle stehen soll, machen wir das mit der Methode insertBefore:

const list = document.querySelector('ol');
const rachel = list.querySelectorAll('li')[0];

list.insertBefore(jen, rachel);