JavaScript Element removeAttribute() Method

What You’ll Learn

Element.removeAttribute() is an instance method that deletes an HTML attribute by name. Learn the MDN disabled example, removing class and data-* attributes, why MDN prefers this over setAttribute(name, null), and five try-it labs aligned with MDN.

Introduction

HTML attributes like disabled, class, and data-action live on elements as name–value pairs. To delete an attribute in JavaScript, call element.removeAttribute(attrName). MDN: it removes the attribute with the specified name from the element.

If the attribute is not present, removeAttribute() does nothing and does not throw—a safe no-op (MDN).

This page is part of JavaScript Element. Pair with getAttribute() and hasAttribute().

Understanding the removeAttribute() Method

Calling el.removeAttribute(attrName) removes that attribute from el’s attribute list if it exists.

• It is an instance method on Element.
• Takes one parameter: attrName (string) — the attribute to remove (MDN).
• Returns undefined.
• No error if the attribute does not exist (MDN).
• Preferred over setAttribute(name, null) per MDN usage notes.
• Pairs with setAttribute(), getAttribute(), and hasAttribute().

📝 Syntax

General form of Element.removeAttribute (MDN):

removeAttribute(attrName)

Parameters

Return value

Usage notes

MDN: use removeAttribute() instead of setting the attribute value to null directly or via setAttribute(). Many attributes will not behave as expected if set to null.

Common patterns

// MDN example — enable a disabled div
document.getElementById("div1").removeAttribute("disabled");

// Remove class or data-* attributes
el.removeAttribute("class");
el.removeAttribute("data-action");

// Safe — no error if missing
if (el.hasAttribute("hidden")) {
  el.removeAttribute("hidden");
}

Examples Gallery

Examples follow MDN Element.removeAttribute() patterns. Use View Output or Try It Yourself for each case.

// Given: <div id="div1" disabled width="200px">
document.getElementById("div1").removeAttribute("disabled");
// Now: <div id="div1" width="200px">

console.log(document.getElementById("div1").hasAttribute("disabled")); // false

false

const card = document.getElementById("card");
// <div id="card" class="highlight active">

card.removeAttribute("class");

console.log(card.getAttribute("class")); // null

null

const btn = document.querySelector("[data-action]");

btn.removeAttribute("data-action");

console.log(btn.hasAttribute("data-action")); // false
console.log(btn.dataset.action);              // undefined

false
undefined

const el = document.getElementById("box");

el.removeAttribute("hidden"); // no error — attribute was not set
el.removeAttribute("hidden"); // still no error

console.log("done");

done

const input = document.getElementById("email");

// Recommended (MDN)
input.removeAttribute("aria-invalid");

// Avoid
// input.setAttribute("aria-invalid", null);

console.log(input.hasAttribute("aria-invalid")); // false

false

🚀 Common Use Cases

• Enabling form controls by removing disabled (MDN).
• Clearing hidden or aria-* state attributes.
• Removing stale data-* hooks after an action completes.
• Resetting validation flags like aria-invalid.
• Cleaning up temporary attributes after animations or modals.
• Pairing with getAttribute() / setAttribute() for full attribute lifecycle.

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available, July 2015).
• Use removeAttribute() instead of setAttribute(name, null) (MDN).
• Missing attributes: no error, safe to call repeatedly.
• Return value is always undefined.
• For namespaced attributes, use removeAttributeNS() (MDN).
• Related: getAttribute(), hasAttribute(), remove(), JavaScript hub.

💡 Best Practices