Element.removeAttribute() — Methode · JavaScript-Referenz

Signatur

Element.prototype.removeAttribute(attrName)

Beschreibung

Die Methode removeAttribute() des Element-Interfaces entfernt ein Attribut vollständig aus dem DOM-Element. Danach liefert getAttribute() den Wert null und hasAttribute() den Wert false.

Besonders nützlich ist die Methode bei booleschen Attributen wie disabled, hidden, required oder readonly. Bei ihnen zählt nur, ob das Attribut vorhanden ist, nicht welchen Wert es hat. setAttribute("disabled", "false") lässt das Element also deaktiviert. Um es wieder zu aktivieren, muss man das Attribut mit removeAttribute("disabled") entfernen (oder el.disabled = false setzen).

In HTML-Dokumenten wird der Attributname vor dem Vergleich in Kleinbuchstaben umgewandelt. Ist das Attribut nicht vorhanden, wird kein Fehler ausgelöst. Deshalb ist vorher keine Prüfung mit hasAttribute() nötig. Für Attribute mit Namensraum, etwa xlink:href in SVG, gibt es removeAttributeNS().

Parameter

Name	Typ	Default	Beschreibung
$attrName Pflicht	string		Name des zu entfernenden Attributs, z. B. `"disabled"` oder `"data-state"`. In HTML-Dokumenten spielt die Groß-/Kleinschreibung keine Rolle. Nicht-String-Werte werden in einen String umgewandelt.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined). Ob das Attribut vorher existierte, lässt sich nicht am Rückgabewert ablesen. Dafür vorher hasAttribute() verwenden.

Beispiele

Button nach Formularprüfung aktivieren

const button = document.createElement('button');
button.setAttribute('disabled', '');
console.log(button.disabled); // true

// Boolesches Attribut entfernen, um den Button zu aktivieren
button.removeAttribute('disabled');
console.log(button.disabled);
console.log(button.hasAttribute('disabled'));

true false false

Fallstrick: "false" als Wert deaktiviert trotzdem

const input = document.createElement('input');
input.setAttribute('readonly', 'false');
console.log(input.readOnly); // true – das Attribut ist ja vorhanden!

input.removeAttribute('readonly');
console.log(input.readOnly);

true false

Mehrere data-Attribute beim Zurücksetzen entfernen

const card = document.createElement('div');
card.dataset.state = 'loading';
card.dataset.error = 'timeout';
card.setAttribute('aria-busy', 'true');

const resetCard = (el) => {
  // Kopie der Liste, da el.attributes „live“ ist
  [...el.attributes]
    .filter(({ name }) => name.startsWith('data-') || name === 'aria-busy')
    .forEach(({ name }) => el.removeAttribute(name));
};

resetCard(card);
console.log(card.outerHTML);

Nicht vorhandenes Attribut entfernen – kein Fehler

const img = document.createElement('img');
img.removeAttribute('title'); // wirft nichts
console.log(img.getAttribute('title'));

null

// Wichtig · Fallstricke

Boolesche Attribute: Nur das Entfernen setzt sie zurück. setAttribute('hidden', 'false') blendet das Element weiterhin aus.
Attribut und Property sind nicht dasselbe: Bei value oder checked gibt das Attribut den Anfangswert vor. Wird es entfernt, ändert sich nicht unbedingt der aktuelle Wert, den der Nutzer eingegeben hat. Setze dafür stattdessen die Property (input.value = '').
Live-Sammlungen: element.attributes ist eine live aktualisierte NamedNodeMap. Wer beim Durchlaufen Attribute entfernt, überspringt Einträge. Lege deshalb zuerst eine Kopie an, z. B. mit [...el.attributes].
Namensräume: Für Attribute mit Namensraum (SVG/XML) ist removeAttributeNS() zu verwenden. Bei XML-Dokumenten wird auf Groß-/Kleinschreibung geachtet.
Alternativen: el.toggleAttribute(name, false) hat die gleiche Wirkung. Für data-* geht auch delete el.dataset.name, für Klassen el.classList.remove().
Sicherheit: Beim Entschärfen von Fremd-HTML reicht es nicht, nur Event-Handler-Attribute (onclick usw.) zu entfernen, um XSS zu verhindern. Nutze stattdessen einen erprobten Sanitizer wie DOMPurify.
Die Methode wird von allen Browsern unterstützt, auch von sehr alten.

Siehe auch

Element.setAttribute() Element.getAttribute() Element.hasAttribute() Element.toggleAttribute() Element.removeAttributeNS() Element.removeAttributeNode() Element.attributes HTMLElement.dataset