How to remove an attribute from an element in JavaScript
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Removing attributes from HTML elements is essential for cleaning up DOM state, disabling features, and managing dynamic element properties in JavaScript applications.
With over 25 years of JavaScript development experience and as the creator of CoreUI, I regularly use attribute removal for form validation, accessibility updates, and component state management.
The most reliable method is using the removeAttribute() method which completely removes the specified attribute from the element.
This ensures clean DOM state and prevents issues with boolean attributes that might remain even when set to false.
Use the removeAttribute() method to completely remove any HTML attribute from a DOM element.
// Get the element
const button = document.getElementById('submitButton')
// Remove different types of attributes
button.removeAttribute('disabled')
button.removeAttribute('data-loading')
button.removeAttribute('aria-busy')
button.removeAttribute('style')
// Remove attributes conditionally
const form = document.querySelector('#userForm')
const inputs = form.querySelectorAll('input')
inputs.forEach(input => {
if (input.hasAttribute('readonly')) {
input.removeAttribute('readonly')
}
})
// Remove custom data attributes
const card = document.querySelector('.user-card')
card.removeAttribute('data-user-id')
card.removeAttribute('data-expanded')
The removeAttribute() method takes the attribute name as a parameter and completely removes it from the element’s HTML. This is particularly important for boolean attributes like disabled, readonly, or hidden where setting them to false as a string would still be considered truthy. The method works with all attribute types including data attributes, ARIA attributes, and standard HTML attributes.
Best Practice Note:
This attribute cleanup approach is used throughout CoreUI components for proper state management and accessibility. Always use removeAttribute() instead of setting boolean attributes to false strings, and check for attribute existence with hasAttribute() before removal to avoid unnecessary operations.
