HTMLOptionsCollection.remove() — Methode · JavaScript-Referenz

Signatur

HTMLOptionsCollection.prototype.remove(index)

Beschreibung

Die Methode remove() der Schnittstelle HTMLOptionsCollection entfernt das <option>-Element an der Position index aus der Sammlung und damit auch aus dem DOM. Man erreicht die Sammlung über select.options.

Typische Einsatzfälle sind dynamische Auswahllisten: Einträge entfernen, die nicht mehr verfügbar sind, abhängige Dropdowns neu befüllen oder bereits gewählte Werte aus einer zweiten Liste herausnehmen.

Wichtig: Die Sammlung ist live. Nach jedem Entfernen rücken die folgenden Elemente um eine Position nach vorn, und length wird um eins kleiner. Wer in einer Schleife mehrere Einträge entfernt, sollte deshalb rückwärts durchlaufen.

Liegt der Index außerhalb des gültigen Bereichs, passiert einfach nichts. Es wird kein Fehler geworfen. Die Methode verhält sich genauso wie HTMLSelectElement.prototype.remove(index).

Parameter

Name	Typ	Default	Beschreibung
$index Pflicht	number		Nullbasierter Index des zu entfernenden `<option>`-Elements. Werte außerhalb von `0` bis `length - 1` bewirken nichts.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined).

Beispiele

Ausgewählte Option entfernen

// <select id="fruits"><option>Apfel</option><option selected>Birne</option><option>Kiwi</option></select>
const select = document.querySelector('#fruits');
const { options } = select;

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

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

["Apfel", "Kiwi"]

Mehrere Optionen rückwärts entfernen (live-Sammlung)

// Alle Optionen ohne Wert (Platzhalter) entfernen
const select = document.querySelector('#country');
const { options } = select;

for (let i = options.length - 1; i >= 0; i--) {
  if (options[i].value === '') {
    options.remove(i);
  }
}

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

Verbleibende Optionen: 3

Abhängiges Dropdown leeren und neu befüllen

const citySelect = document.querySelector('#city');

const fillCities = (cities) => {
  const { options } = citySelect;
  // Alte Einträge entfernen; immer Index 0, da die Sammlung nachrückt
  while (options.length > 0) {
    options.remove(0);
  }
  cities.forEach((name) => options.add(new Option(name, name.toLowerCase())));
};

fillCities(['Berlin', 'Hamburg', 'München']);
console.log(citySelect.options.length);

3

// Wichtig · Fallstricke

Live-Sammlung: Wenn du vorwärts mit i++ durchläufst und dabei entfernst, überspringst du Elemente. Durchlaufe die Liste rückwärts oder entferne immer bei Index 0.
Kein Fehler bei ungültigem Index: Negative oder zu große Werte werden stillschweigend ignoriert. Prüfe selectedIndex !== -1, bevor du die ausgewählte Option entfernst.
Schnellere Alternativen zum Leeren: options.length = 0 oder select.replaceChildren() entfernen alle Einträge in einem Schritt.
Nicht verwechseln mit Element.prototype.remove(): Diese Methode nimmt kein Argument und entfernt das Element selbst. option.remove() ist also ebenfalls ein gültiger Weg.
Wird die ausgewählte Option entfernt, ändert sich selectedIndex. Es wird aber kein change-Ereignis ausgelöst.
Die Methode wird von allen modernen Browsern seit Langem unterstützt.

Siehe auch

Element.remove() HTMLOptionsCollection.add() HTMLAllCollection.item() HTMLCollection.item() HTMLAllCollection.namedItem()