Element.removeAttributeNode() — Methode · JavaScript-Referenz

Signatur

Element.prototype.removeAttributeNode(attributeNode)

Beschreibung

removeAttributeNode() entfernt ein Attribut, das als Attr-Objekt übergeben wird, also nicht über seinen Namen wie bei removeAttribute(). Du brauchst also vorher eine Referenz auf genau den Attributknoten, den du loswerden willst, etwa über getAttributeNode(), element.attributes oder getAttributeNodeNS().

Zurück bekommst du den entfernten Attr-Knoten. Dessen name und value bleiben erhalten, und seine Eigenschaft ownerElement ist danach null. Deshalb kannst du den Knoten zwischenspeichern und später mit setAttributeNode() wieder an dasselbe oder ein anderes Element anhängen, zum Beispiel für Rückgängig-Funktionen.

Im normalen Alltag reicht meist removeAttribute(name), weil es kürzer ist und Fehler verzeiht. removeAttributeNode() lohnt sich vor allem, wenn du ohnehin mit Attr-Objekten arbeitest, zum Beispiel beim Durchlaufen von element.attributes, oder wenn du genau einen bestimmten Knoten entfernen willst, egal welchen Namensraum er hat.

Parameter

Name	Typ	Default	Beschreibung
$attributeNode Pflicht	Attr		Der `Attr`-Knoten, der entfernt werden soll. Er muss aktuell zu diesem Element gehören (`attr.ownerElement === element`).

Rückgabewert

Typ

Attr

Beschreibung

Der entfernte Attr-Knoten. Name und Wert bleiben erhalten, ownerElement ist danach null.

Beispiele

Attribut über seinen Knoten entfernen

const button = document.createElement('button');
button.setAttribute('disabled', '');
button.setAttribute('title', 'Bitte warten');

const attr = button.getAttributeNode('disabled');
const removed = button.removeAttributeNode(attr);

console.log(removed.name);              // entfernter Knoten
console.log(removed.ownerElement);      // nicht mehr verknüpft
console.log(button.hasAttribute('disabled'));

disabled null false

Alle data-*-Attribute entfernen

const card = document.createElement('div');
card.dataset.id = '42';
card.dataset.state = 'open';
card.className = 'card';

// Array.from, weil element.attributes eine live NamedNodeMap ist
for (const attr of Array.from(card.attributes)) {
  if (attr.name.startsWith('data-')) {
    card.removeAttributeNode(attr);
  }
}

console.log(card.outerHTML);

Attribut entfernen und später wiederherstellen

const input = document.createElement('input');
input.setAttribute('required', '');

// Pflichtfeld vorübergehend deaktivieren
const saved = input.removeAttributeNode(input.getAttributeNode('required'));
console.log(input.required);

// Später denselben Knoten wieder anhängen
input.setAttributeNode(saved);
console.log(input.required, saved.ownerElement === input);

false true true

Fehlerfall abfangen

const a = document.createElement('a');
const b = document.createElement('a');
b.setAttribute('href', '/start');

try {
  // Das Attribut gehört zu b, nicht zu a
  a.removeAttributeNode(b.getAttributeNode('href'));
} catch (err) {
  console.log(err.name);
}

NotFoundError

// Wichtig · Fallstricke

Ausnahmen: Gehört der Knoten nicht zu diesem Element, wird eine DOMException mit dem Namen NotFoundError geworfen. Dazu gehört auch der Fall, dass er schon entfernt wurde. removeAttribute() ignoriert fehlende Attribute dagegen ohne Fehler.
null übergeben: Liefert zum Beispiel getAttributeNode() für ein fehlendes Attribut null und du gibst das weiter, wirft der Aufruf einen TypeError. Prüfe den Knoten also vorher.
Live-Sammlung: element.attributes ist eine live NamedNodeMap. Wenn du beim direkten Durchlaufen Attribute entfernst, werden Einträge übersprungen. Kopiere die Sammlung deshalb vorher mit Array.from().
Standardwerte: In HTML-Dokumenten werden keine Standardattribute nachgeladen. Das frühere DOM-Verhalten, bei dem nach dem Entfernen ein Standardwert aus der DTD nachrückte, gilt heute nicht mehr.
Kompatibilität: Wird von allen modernen Browsern und seit dem Internet Explorer 6 unterstützt. In Node.js gibt es diese Methode nur mit DOM-Umgebungen wie jsdom.

Siehe auch

Element.removeAttribute() Element.getAttributeNode() Element.setAttributeNode() Element.attributes Element.toggleAttribute() Attr new MediaStreamAudioDestinationNode()