Aufgabe von ../../dom-replace-remove.html

Lösung

Rosen Kakteen Orchideen Hortensien Tulpen
<input type="radio" value="Rosen" name="blumen"> Rosen
<input type="radio" value="Kakteen" name="blumen"> Kakteen
<input type="radio" value="Orchideen" name="blumen"> Orchideen
<input type="radio" value="Hortensien" name="blumen"> Hortensien
<input type="radio" value="Tulpen" name="blumen"> Tulpen

Hinweis: Die Lösung ist trickreich, denn die Eingabefelder bestehen aus Element-Knoten und Text-Knoten. Um ein Feld zu löschen, müssen sowohl das input-Element als auch der nachfolgende Text gelöscht werden.

Die Lösung nutzt das div-Element mit der CSS-Klasse »auswahl« und sammelt mit der Eigenschaft children die input-Elemente in einer HTMLCollection.

del.nextSibling.remove() löscht den Text, erst dann löscht del.remove() das input-Element selbst.

function removeElement(index) {
   const buttons = document.querySelector('.realauswahl').children;
   const del = buttons [index];
   del.nextSibling.remove();
   del.remove();
}

removeElement(2);
removeElement(3);
Rosen Kakteen Orchideen Hortensien Tulpen