Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

dom
communitycreator

What is the DOM method removeAttribute()?

Ayush Trivedi

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Answers Code

Overview

In this shot, we will learn to remove an attribute from an element using the DOM method removeAttribute().

The removeAttribute() method is applied to the element from which we want to remove the attribute. It takes the attribute name we want to remove from the element as a parameter.

removeAttribute() vs. removeAttributeNode()

  • removeAttributeNode() method: It takes an attribute node as a parameter

  • removeAttribute()method: It takes the name of the attribute as a parameter and removes it.

They both execute the same result, but removeAttributeNode() returns the attribute node that is removed.

Code

The following code shows how to remove a CSS class attribute from an element:

The removeAttribute Method()

Explanation

  • Line 5: We declare a CSS class with only the color property.
  • Line 12: We define a p element with id elem and class test.
  • Line 14: We use paragraph elements to display text.
  • Line 16: We write a button tag with function change(). It is called when the user clicks on it.
  • Line 20: We use getElementById() to get paragraph element with id elem and assign it in a variable.
  • Line 21: We apply the removeAttribute() method on the variable and pass the attribute name in it. As a result, this attribute is removed from the element p.

Output

Before we click the button, we can notice that the color of the text is red due to the CSS class, test. But when we click the button, the class attribute from the element is removed, and the text color is changed to the default black color.

RELATED TAGS

dom
communitycreator

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Answers Code
Keep Exploring