HTMLSelectElement.remove() — Methode · JavaScript-Referenz

Signatur

HTMLSelectElement.prototype.remove(index)

Beschreibung

Mit HTMLSelectElement.remove(index) entfernen Sie gezielt eine Option aus einer Auswahlliste. Der Index bezieht sich auf die Sammlung select.options, also auf alle <option>-Elemente in Dokumentreihenfolge, auch auf solche innerhalb von <optgroup>. Das ist praktisch bei dynamischen Formularen, etwa wenn eine bereits vergebene Auswahl verschwinden soll oder abhängige Listen neu aufgebaut werden.

Die Methode hat zwei Formen: Mit einem Zahlenargument entfernt sie die Option an diesem Index. Ohne Argument wird die geerbte Methode Element.prototype.remove() aufgerufen, dann wird das ganze <select>-Element aus dem DOM gelöscht. Diese Doppelbedeutung ist ein häufiger Grund für Fehler.

Liegt der Index außerhalb des gültigen Bereichs (negativ oder >= options.length), passiert nichts und es wird auch kein Fehler geworfen. Nach dem Entfernen rücken die folgenden Optionen nach, ihre Indizes werden also um eins kleiner. Das müssen Sie beachten, wenn Sie mehrere Optionen in einer Schleife entfernen.

Parameter

Name	Typ	Default	Beschreibung
$index	number		Nullbasierter Index der zu entfernenden Option in `select.options`. Werte außerhalb des Bereichs werden ignoriert. Fehlt das Argument, wird das `<select>`-Element selbst aus dem DOM entfernt (`Element.remove()`).

Rückgabewert

Typ

undefined

Beschreibung

Kein Rückgabewert. Die entfernte Option wird nicht zurückgegeben. Wenn Sie sie noch brauchen, holen Sie sie vorher mit select.options[index].

Beispiele

Ausgewählte Option entfernen

// <select id="farben"><option>Rot</option><option>Grün</option><option>Blau</option></select>
const select = document.querySelector('#farben');
select.selectedIndex = 1; // „Grün“ ist ausgewählt

if (select.selectedIndex !== -1) {
  select.remove(select.selectedIndex);
}

console.log([...select.options].map((o) => o.text));

["Rot", "Blau"]

Mehrere Optionen entfernen (rückwärts iterieren)

// Alle deaktivierten Optionen entfernen
const select = document.querySelector('#produkte');

// Rückwärts laufen, damit das Nachrücken der Indizes keine Einträge überspringt
for (let i = select.options.length - 1; i >= 0; i--) {
  if (select.options[i].disabled) {
    select.remove(i);
  }
}

console.log(`Verbleibende Optionen: ${select.options.length}`);

Verbleibende Optionen: 3

Abhängige Liste leeren und neu befüllen

const land = document.querySelector('#land');
const stadt = document.querySelector('#stadt');

const staedte = {
  de: ['Berlin', 'Hamburg', 'München'],
  at: ['Wien', 'Graz']
};

land.addEventListener('change', () => {
  // Alle Optionen entfernen, immer Index 0
  while (stadt.options.length > 0) {
    stadt.remove(0);
  }
  for (const name of staedte[land.value] ?? []) {
    stadt.add(new Option(name, name.toLowerCase()));
  }
  console.log(stadt.options.length);
});

2 (nach Auswahl von „at“)

Vorsicht: Aufruf ohne Argument

const select = document.querySelector('#farben');

select.remove(5);   // Index existiert nicht, es passiert nichts
select.remove();    // entfernt das GESAMTE <select> aus dem DOM!

console.log(document.querySelector('#farben'));

null

// Wichtig · Fallstricke

Doppelbedeutung: select.remove() ohne Argument löscht das ganze <select>-Element. Übergeben Sie deshalb immer ausdrücklich einen Index. Vorsicht bei undefined aus einer Variablen: Das Argument gilt dann als übergeben und wird zu 0 umgewandelt, sodass die erste Option entfernt wird.
Nachrückende Indizes: Wenn Sie in einer Schleife vorwärts entfernen, werden Optionen übersprungen. Iterieren Sie rückwärts oder entfernen Sie immer Index 0.
Ungültige Indizes werden stillschweigend ignoriert, es gibt keine Ausnahme.
Alternativen: select.options.remove(i), option.remove() oder select.options.length = 0 bzw. select.replaceChildren(), um alle Optionen auf einmal zu entfernen.
Wird die ausgewählte Option entfernt, ändert sich selectedIndex. Ein change-Event wird dabei nicht ausgelöst.
Kompatibilität: wird in allen modernen Browsern unterstützt. Die argumentlose Form, die das Element selbst entfernt, erfordert Element.remove() (kein Internet Explorer).

Siehe auch

Element.remove() HTMLSelectElement.item() HTMLSelectElement.add() HTMLSelectElement.namedItem() HTMLSelectElement.showPicker()