Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

dom
communitycreator

What is the removeAttributeNode() DOM method?

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 how to remove any attribute in an element using the DOM method removeAttributeNode().

The method removeAttributeNode() is applied on the element from which we want to remove an attribute. A parameter is passed, which is the attribute node that we want to remove from the element.

Code

Let’s write a code to remove a CSS class attribute from an element.

Using the "removeAttributeNode()" method

Explanation

  • Line 5: We have a CSS class with only one property color.
  • Line 12: We define a p element with id elem and class test.
  • Line 14: A paragraph element to display text.
  • Line 16: We have written a button tag with the function change(). It will be called when the user clicks on it.
  • Line 20: We use getElementById() to get paragraph element with id elem and assign it to a variable.
  • Line 21: We apply getAttributeNode() on the variable, and pass the attribute name in it. This attribute will be removed from the element p.
  • Line 22: On the variable elem, which has the element from which we will remove the atrribute, we apply removeAttributeNode() and pass the attribute node attr, which we got in an earlier step. This will remove the attribute from the element.

Output

We see that before clicking the button, the color of the text was 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 color black.

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