DOMTokenList.remove() — Methode · JavaScript-Referenz

Signatur

DOMTokenList.prototype.remove(...tokens)

Beschreibung

Die Methode remove() der Schnittstelle DOMTokenList entfernt die übergebenen Token aus der Liste und aktualisiert dabei sofort das zugrunde liegende Attribut. Am häufigsten nutzt man sie über element.classList, um CSS-Klassen zu entfernen. Sie funktioniert aber auch mit anderen Token-Listen wie relList von <a>/<link>, sandbox von <iframe> oder part.

Man kann beliebig viele Token auf einmal übergeben. Token, die gar nicht in der Liste stehen, werden stillschweigend ignoriert. Es gibt also keinen Fehler, und vorher muss man nicht mit contains() prüfen.

Nach dem Aufruf schreibt der Browser das Attribut neu, und zwar normalisiert: Doppelte Token und überflüssige Leerzeichen verschwinden. Soll eine Klasse abhängig von einer Bedingung gesetzt oder entfernt werden, ist toggle(token, force) meist die bessere Wahl.

Parameter

Name	Typ	Default	Beschreibung
$...tokens Pflicht	string		Ein oder mehrere Token (z. B. Klassennamen), die entfernt werden sollen. Nicht-String-Werte werden in Strings umgewandelt. Ein Token darf weder leer sein noch Leerzeichen enthalten.

Rückgabewert

Typ

void

Beschreibung

Gibt undefined zurück. Die Liste und das zugehörige Attribut werden direkt geändert.

Beispiele

Eine einzelne CSS-Klasse entfernen

const box = document.createElement('div');
box.className = 'card active highlighted';

box.classList.remove('active');
console.log(box.className);

card highlighted

Mehrere Klassen auf einmal entfernen (nicht vorhandene werden ignoriert)

const alert = document.createElement('div');
alert.className = 'alert alert-error visible';

// 'alert-warning' gibt es nicht – das ist kein Fehler
alert.classList.remove('alert-error', 'alert-warning', 'visible');
console.log(alert.className);

alert

Aktiven Zustand in einer Tab-Navigation zurücksetzen

// HTML: <nav><button class="tab active">A</button><button class="tab">B</button></nav>
const tabs = document.querySelectorAll('.tab');

const activate = (clicked) => {
  tabs.forEach((tab) => tab.classList.remove('active'));
  clicked.classList.add('active');
};

tabs.forEach((tab) => tab.addEventListener('click', () => activate(tab)));

Token aus relList und einer Array-Liste entfernen

const link = document.createElement('a');
link.rel = 'noopener noreferrer nofollow';

link.relList.remove('nofollow');
console.log(link.rel);

// Klassen aus einem Array per Spread entfernen
const el = document.createElement('span');
el.className = 'a b c d';
const toRemove = ['b', 'd'];
el.classList.remove(...toRemove);
console.log(el.className);

noopener noreferrer a c

// Wichtig · Fallstricke

Ungültige Token werfen Fehler: Ein leerer String löst eine SyntaxError-DOMException aus, ein Token mit Leerzeichen (z. B. 'a b') eine InvalidCharacterError-DOMException. Um mehrere Klassen aus einem String zu entfernen, zuerst aufteilen: el.classList.remove(...str.split(/\s+/).filter(Boolean)).
Normalisierung: Nach remove() wird das Attribut neu serialisiert. Doppelte Token und zusätzliche Leerzeichen gehen dabei verloren, und zwar auch dann, wenn gar nichts entfernt wurde.
Leeres Attribut bleibt stehen: Entfernt man die letzte Klasse, bleibt class="" am Element. Wer das Attribut ganz loswerden will, ruft removeAttribute('class') auf.
Live-Auswahlen: Beim Durchlaufen einer live HTMLCollection aus getElementsByClassName('x') fallen Elemente beim Entfernen von x sofort aus der Sammlung, sodass Einträge übersprungen werden. Deshalb besser querySelectorAll() nehmen oder vorher mit Array.from() kopieren.
Kompatibilität: Wird in allen aktuellen Browsern unterstützt. Der Internet Explorer 10/11 kannte nur ein Argument und classList dort nicht bei SVG-Elementen.

Siehe auch

DOMTokenList DOMTokenList.add() DOMTokenList.toggle() DOMTokenList.contains() DOMTokenList.replace() Element.classList Element.removeAttribute()