NamedNodeMap.removeNamedItem() — Methode · JavaScript-Referenz

Signatur

NamedNodeMap.prototype.removeNamedItem(attrName)

Beschreibung

Die Methode removeNamedItem() entfernt aus einer NamedNodeMap – in der Praxis fast immer element.attributes – das Attribut mit dem angegebenen Namen. Rückgabewert ist das entfernte Attr-Objekt. Damit können Sie das Attribut später z. B. mit setNamedItem() wieder an dasselbe oder ein anderes Element anhängen.

Weil element.attributes eine live-Sammlung ist, ändert sich das Element sofort: Das Attribut verschwindet aus dem DOM, und attributes.length wird um eins kleiner. Die Wirkung entspricht also element.removeAttributeNode() bzw. im Wesentlichen element.removeAttribute(). Der Unterschied: Sie bekommen das Attr-Objekt zurück, und wenn es kein Attribut dieses Namens gibt, wird ein Fehler geworfen, statt dass nichts passiert.

Der Name wird als qualifizierter Name verglichen (z. B. xlink:href). Bei HTML-Elementen in einem HTML-Dokument wird er vorher in Kleinbuchstaben umgewandelt. Für Attribute mit Namensraum ist removeNamedItemNS() die genauere Wahl.

Parameter

Name	Typ	Default	Beschreibung
$attrName Pflicht	string		Qualifizierter Name des zu entfernenden Attributs, z. B. `"class"` oder `"data-id"`.

Rückgabewert

Typ

Attr

Beschreibung

Das entfernte Attr-Objekt. Seine Eigenschaft ownerElement ist danach null.

Beispiele

Attribut entfernen und entferntes Attr auswerten

const input = document.createElement('input');
input.setAttribute('disabled', '');
input.setAttribute('placeholder', 'Name');

const removed = input.attributes.removeNamedItem('disabled');
console.log(removed.name, removed.ownerElement);
console.log(input.hasAttribute('disabled'));
console.log(input.attributes.length);

disabled null false 1

Fehlendes Attribut sicher behandeln

const div = document.createElement('div');

const safeRemove = (el, name) => {
  try {
    return el.attributes.removeNamedItem(name);
  } catch (err) {
    if (err.name === 'NotFoundError') return null;
    throw err;
  }
};

console.log(safeRemove(div, 'title'));

null

Attribut von einem Element auf ein anderes verschieben

const source = document.createElement('button');
const target = document.createElement('button');
source.setAttribute('aria-pressed', 'true');

// Entfernen gibt das Attr frei, danach kann es wieder angehängt werden
const attr = source.attributes.removeNamedItem('aria-pressed');
target.attributes.setNamedItem(attr);

console.log(source.outerHTML);
console.log(target.outerHTML);

Alle data-*-Attribute entfernen (live-Sammlung beachten)

const el = document.createElement('div');
el.dataset.id = '42';
el.dataset.role = 'card';
el.className = 'box';

// Vorher in ein Array kopieren, da sich attributes beim Entfernen ändert
const names = [...el.attributes]
  .map((a) => a.name)
  .filter((n) => n.startsWith('data-'));
names.forEach((n) => el.attributes.removeNamedItem(n));

console.log(el.outerHTML);

// Wichtig · Fallstricke

Fehler statt stiller Rückgabe: Gibt es kein Attribut mit dem Namen, wirft die Methode eine DOMException vom Typ NotFoundError. element.removeAttribute() dagegen tut in diesem Fall einfach nichts. Prüfen Sie vorher mit hasAttribute() oder fangen Sie den Fehler ab.
Live-Sammlung: Wenn Sie in einer for-Schleife mit Index über element.attributes gehen und dabei Einträge entfernen, werden Attribute übersprungen. Kopieren Sie die Namen deshalb vorher, oder gehen Sie rückwärts durch die Sammlung.
Groß-/Kleinschreibung: Bei HTML-Elementen wird der Name in Kleinbuchstaben umgewandelt, bei SVG- und XML-Elementen nicht. Für Attribute mit Namensraum sollten Sie removeNamedItemNS() verwenden.
Kompatibilität: Wird von allen Browsern unterstützt. In ganz alten Browsern gab es bei DocumentType.entities/notations abweichendes Verhalten, das heute keine Rolle mehr spielt.
Im Alltag ist element.removeAttribute() meist lesbarer. removeNamedItem() lohnt sich, wenn Sie das Attr-Objekt weiterverwenden wollen.

Siehe auch

Element.attributes Attr NamedNodeMap.removeNamedItemNS() NamedNodeMap.getNamedItem() NamedNodeMap.setNamedItem()