How to Remove Attribute in JavaScript: Simple Guide

To remove an attribute from an HTML element in JavaScript, use the removeAttribute method on the element, passing the attribute name as a string. For example, element.removeAttribute('class') removes the class attribute from the element.

Syntax

The removeAttribute method is called on an HTML element to remove a specified attribute.

• element: The HTML element you want to modify.
• removeAttribute(attributeName): The method that removes the attribute named attributeName.
• attributeName: A string representing the name of the attribute to remove.

javascript

element.removeAttribute('attributeName');

Example

This example shows how to remove the title attribute from a button element. Initially, the button has a tooltip. After removing the attribute, the tooltip disappears.

javascript

const button = document.createElement('button');
button.setAttribute('title', 'Click me!');
console.log('Before:', button.getAttribute('title'));

button.removeAttribute('title');
console.log('After:', button.getAttribute('title'));

Output

Before: Click me!
After: null

Common Pitfalls

One common mistake is trying to remove an attribute by setting it to an empty string or null, which does not actually remove the attribute but only changes its value.

Another pitfall is calling removeAttribute on a variable that is not an HTML element, which will cause an error.

javascript

const div = document.createElement('div');
// Wrong: This only sets the attribute value to empty, does not remove it
 div.setAttribute('id', 'myDiv');
 div.setAttribute('id', '');
 console.log(div.hasAttribute('id')); // true

// Right: This removes the attribute completely
 div.removeAttribute('id');
 console.log(div.hasAttribute('id')); // false

Output

true
false

Quick Reference

Action	Code Example	Description
Remove attribute	element.removeAttribute('attrName')	Removes the attribute named 'attrName' from the element.
Check attribute	element.hasAttribute('attrName')	Returns true if the element has the attribute.
Get attribute	element.getAttribute('attrName')	Returns the value of the attribute or null if missing.
Set attribute	element.setAttribute('attrName', 'value')	Adds or changes the attribute value.

Key Takeaways

Use element.removeAttribute('attributeName') to remove an attribute from an HTML element.

Setting an attribute to an empty string does not remove it; use removeAttribute instead.

Always ensure the variable is a valid HTML element before calling removeAttribute.

removeAttribute removes the attribute completely, affecting element behavior or style.

Use hasAttribute and getAttribute to check attribute presence and value before removal.