JavaScript NamedNodeMap removeNamedItem() Method

What You’ll Learn

The removeNamedItem() method of a NamedNodeMap removes an attribute by name and returns the removed Attr node. Learn the MDN element.attributes example, what happens when the attribute is missing, and how it compares with removeAttribute()—with five examples and try-it labs.

Introduction

getNamedItem() reads an attribute from element.attributes. removeNamedItem() does the opposite—it deletes the attribute from the element and hands you back the Attr node that was removed.

MDN’s example removes a test attribute from a <pre> element, then checks with getNamedItem("test") to confirm it is gone.

Understanding the removeNamedItem() Method

An instance method on NamedNodeMap that removes an attribute node by its name string.

• attrName — the name of the attribute to remove (e.g. "test", "class").
• Returns — the removed Attr node.
• Exception — thrown when no attribute with that name exists (MDN).
• Side effect — the attribute disappears from the element in the DOM.
• Common source — element.attributes.removeNamedItem(name).
• Baseline Widely available on MDN (since July 2015).

📝 Syntax

Call the method on a NamedNodeMap (usually from element.attributes):

namedNodeMap.removeNamedItem(attrName)

Parameters

• attrName — string name of the attribute to remove.

Return value

The removed Attr node.

Exceptions

Thrown if there is no attribute with the given name.

Typical pattern (MDN idea)

const pre = document.querySelector("pre");
const attrMap = pre.attributes;

let result = `The 'test' attribute initially contains '${attrMap["test"].value}'.\n`;
result += "We remove it.\n\n";
attrMap.removeNamedItem("test");

result += attrMap.getNamedItem("test")
  ? "And 'test' still exists."
  : "And 'test' is no more to be found.";

pre.textContent = result;

⚖️ removeNamedItem() vs Related Ideas

Examples Gallery

Examples follow MDN NamedNodeMap.removeNamedItem. Labs use live element.attributes on real DOM nodes.

const pre = document.querySelector("pre");
const attrMap = pre.attributes;

let result = `The 'test' attribute initially contains '${attrMap["test"].value}'.\n`;
result += "We remove it.\n\n";
attrMap.removeNamedItem("test");

result += attrMap.getNamedItem("test")
  ? "And 'test' still exists."
  : "And 'test' is no more to be found.";

pre.textContent = result;

The 'test' attribute initially contains 'testValue'.
We remove it.

And 'test' is no more to be found.

const box = document.querySelector("#demo");
const removed = box.attributes.removeNamedItem("data-role");

console.log({
  name: removed.name,
  value: removed.value,
  stillOnElement: box.hasAttribute("data-role"),
});

{ "name": "data-role", "value": "panel", "stillOnElement": false }

const box = document.querySelector("#demo");
const map = box.attributes;

const before = map.length;
map.removeNamedItem("class");
const after = map.length;

console.log(before, after, before - after);

3 2 1

const map = document.querySelector("#demo").attributes;

try {
  map.removeNamedItem("missing-attr");
} catch (err) {
  console.log(err.name); // NotFoundError
}

NotFoundError

const a = document.querySelector("#box-a");
const b = document.querySelector("#box-b");

const attrFromMap = a.attributes.removeNamedItem("title");
const fromElement = b.removeAttribute("title");

console.log(attrFromMap.name, typeof fromElement);

title undefined

🚀 Common Use Cases

• Remove attributes while keeping the Attr node for inspection or reuse.
• Clean up attributes when iterating element.attributes.
• Teach the difference between map-level and element-level DOM APIs.
• Interop with legacy code that mutates NamedNodeMap directly.
• Mirror MDN’s attribute-removal demo on a live element.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since July 2015) — no Deprecated / Experimental / Non-standard banner.
• Throws when the attribute name is not found—unlike removeAttribute().
• Returns the removed Attr, which you can still read after removal.
• Prefer removeAttribute() for simple HTML attribute deletion.
• Related learning: getNamedItem(), removeAttribute(), removeAttributeNode(), Element.attributes.

💡 Best Practices