Table of Contents

JavaScript removeAttribute() method removes an attribute from an HTML element. Call it on the element and pass the attribute name as a string. If the attribute is already absent, the call leaves it absent; the method does not return a value. This guide shows how to remove common attributes, handle boolean attributes, work with data attributes, and keep DOM properties in sync with the interface.

Syntax and Basic Example

element.removeAttribute(name);

The name argument identifies the attribute to remove. In an HTML document, attribute names are case-insensitive. Here is a basic example that removes a tooltip:

<button id="save" title="Save this document">Save</button>

<script>
const saveButton = document.querySelector("#save");

saveButton.removeAttribute("title");
console.log(saveButton.hasAttribute("title")); // false
</script>

The button remains on the page; only its title attribute is removed. Use hasAttribute() to check whether an attribute exists and getAttribute() to read its string value.

Remove an ID, Class, or Link Attribute

removeAttribute() can remove different HTML attributes from an element:

<a id="profileLink" class="nav-item" href="/profile">Profile</a>

<script>
const profileLink = document.querySelector("#profileLink");

profileLink.removeAttribute("class");
profileLink.removeAttribute("href");

console.log(profileLink.hasAttribute("class")); // false
console.log(profileLink.hasAttribute("href")); // false
</script>

Removing href means the anchor no longer has a destination URL, though it remains an anchor element. If the element should not act as a link, consider whether a button or another semantic element better matches its purpose.

Remove Boolean Attributes

Boolean HTML attributes are true when they are present and false when absent. Removing a boolean attribute turns off the corresponding state:

<button id="publish" disabled>Publish</button>

<script>
const publishButton = document.querySelector("#publish");

console.log(publishButton.disabled); // true
publishButton.removeAttribute("disabled");
console.log(publishButton.disabled); // false
</script>

For a boolean property such as disabled, setting publishButton.disabled = false is another clear way to update the current control state. Use the property when you are changing live state and use removeAttribute() when you specifically intend to remove the markup attribute.

Remove a data-* Attribute

Custom data-* attributes can be removed with their full attribute name:

<div id="card" data-state="open" data-user-id="42">Profile card</div>

<script>
const card = document.querySelector("#card");

card.removeAttribute("data-state");
console.log(card.hasAttribute("data-state")); // false
console.log(card.dataset.state); // undefined
console.log(card.getAttribute("data-user-id")); // "42"
</script>

You can also remove a data attribute through dataset using the corresponding camelCase property:

delete card.dataset.userId;
console.log(card.hasAttribute("data-user-id")); // false

Attribute values accessed through dataset are strings. Removing one custom data attribute does not affect other attributes on the same element.

Remove an Attribute from Several Elements

Use querySelectorAll() and iterate through its result to remove an attribute from a group of elements:

<button class="temporary" title="Temporary action">One</button>
<button class="temporary" title="Temporary action">Two</button>

<script>
document.querySelectorAll(".temporary").forEach((button) => {
  button.removeAttribute("title");
});
</script>

This removes the title attribute from each matched button. The collection is a static NodeList, so it contains the elements matched when querySelectorAll() runs.

Toggle an Attribute in a Runnable Example

This example removes the hidden attribute when a button is clicked, then adds it back on the next click:

<button id="toggleDetails" aria-expanded="false">Show details</button>
<p id="details" hidden>Additional information appears here.</p>

<script>
const toggle = document.querySelector("#toggleDetails");
const details = document.querySelector("#details");

toggle.addEventListener("click", () => {
  const isHidden = details.hasAttribute("hidden");

  if (isHidden) {
    details.removeAttribute("hidden");
    toggle.setAttribute("aria-expanded", "true");
    toggle.textContent = "Hide details";
  } else {
    details.setAttribute("hidden", "");
    toggle.setAttribute("aria-expanded", "false");
    toggle.textContent = "Show details";
  }
});
</script>

The hidden attribute controls whether the details are displayed. The example also updates the button’s aria-expanded value and label to match the visible state.

Attributes, Properties, and Related Methods

Attributes are values in an element’s markup; DOM properties are JavaScript values on the element object. Some properties reflect their corresponding attributes. For example, removing disabled also makes the reflected disabled property false. Other properties represent current state, such as an input’s live value, and may differ from the original attribute.

Attribute methods provide a complete set of operations:

  • getAttribute(name) returns the attribute string or null when it is absent.
  • hasAttribute(name) checks for presence.
  • setAttribute(name, value) adds an attribute or updates its value.
  • removeAttribute(name) removes it.

Choose the method or property that matches the value you intend to change. This keeps markup and live interface state clear in your JavaScript.

Categorized in:

Javascript, Js DOM,

Tagged in:

, , , ,