What is DOM removeNamedItem() method used for in HTML?

Overview

The removeNamedItem() method dynamically removes attributes of HTML elements as the user only interacts with the web page. This method is used by developers when they want the behavior of their web page to change according to user interaction.

Syntax

The syntax we'll use is as follows:

Here, namednodemap object is acquired using the attribute property on an HTML element, and contains all attributes associated with that element.

Parameters

This method needs a single parameter which is defined below:

• nodename: This is a required attribute and a string that specifies the node or the attribute which needs to be removed.

Return value

This method returns the HTML element whose attribute was removed using the removeNamedItem() method.

Example

Let's now make use of this method in the following code example:

Explanation

The explanation for the code in the HTML tab is given below:

• Line 6: Here, we have an <input> tag with value and class attributes. We fetch this tag to demonstrate the functionality of removeNamedItem(). To read more on the value attribute, please refer to this Answer.
• Line 7: In this line of code, we have a <button> tag, which listens for the onclick event and triggers the removeAttr() method as the user clicks on the <button>.
• Lines 9–14: This piece of code contains the <script> tag, which encapsulates our removeAttr() method with the following lines of code:
• Line 11: First, we use the document.getElementById() method to get hold of our <input> tag and use the attribute property to store all of its attributes in namenodemap.
• Line 12: Lastly, we use the removeNamedItem() method to remove the class attribute from the <input> tag—removing all the styles applied.

Note: For more details on the document.getElementById() method, please visit this link.