HTML - DOM Element removeAttributeNode() Method

Quiz

The HTML DOM Element removeAttributeNode() method is used to remove a specific attribute node from an element. An attribute node is an attribute such as class, id, alt, src, etc., that provides additional information about the element.

Using this method, you can also remove any custom attribute node just by specifying the attribute node to remove. See this also

Syntax

Following is the syntax of the HTML DOM Element removeAttributeNode() function −

element.removeAttributeNode(attributeNode)

Parameters

This method accepts a single parameter as mentioned below:

Parameter	Description
attributeNode	A node object that you want to remove from the element.

Return Value

This method returns the attribute node that was removed from an element.

Example 1: Removing class Attribute from DIV Element

The following is the basic example of the HTML DOM Element removeAttributeNode() method. It removes class attribute node from the <div> element −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element removeAttributeNode()</title>
<style>
    .demo {
        background-color: green;
        color: white;
        padding: 10px;
    }
</style>
</head>
<body>
<h3>HTML DOM Element removeAttributeNode() Method</h3>
<p>Click the button below to remove the class attribute node from the <div> 
element.</p>
<div id="my" class="demo">This div has a class attribute node.</div><br>
<button onclick="removeClassAttributeNode()">Remove Class Attribute</button>
<div id="o"></div>
<div id="res"></div>
<script>
   function removeClassAttributeNode() {
      const div = document.getElementById('my');
      const attr = div.getAttributeNode('class');
      if (attr) {
         document.getElementById('res').innerHTML = 
         "Removed attribute node: " + div.removeAttributeNode(attr).name;
         document.getElementById('o').textContent = 
         'Attribute removed successfully.';
      }
   }
</script>
</body>
</html>

The above program removes the "class" attribute from the "div" element when clicking the button.

Example 2: Removing Custom Data Attribute Node

Following is another example of the HTML DOM Element removeAttributeNode() method. We use this method to remove the custom attribute node from <p> element −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM ELement removeAttributeNode()</title>
</head>
<body>
<h3>HTML DOM Element removeAttributeNode() Method</h3>
<p>Click the button below to remove a custom data attribute node.</p>
<p id="my" data-info="custom">This p has a custom data attribute.</p>
<button onclick="removeDataAttributeNode()">Remove Attribute</button>
<p id="o"></p>
<script>
   function removeDataAttributeNode() {
      const div = document.getElementById('my');
      const attr=div.getAttributeNode('data-info');      
      if (attr) {
         div.removeAttributeNode(attr);
         document.getElementById('o').textContent = 
		 'Data attribute removed successfully.';
      } else {
         document.getElementById('o').textContent = 
		 'Data attribute not found.';
      }
   }
</script>
</body>
</html>

After executing the program, a button will be displayed, and when clicked, the "data-info" attribute will be removed node.

Example 3: Removing href Attribute Node

The example below shows how to remove the "href" attribute node from the anchor (<a>) element using the removeAttributeNode() method −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element removeAttributeNode()</title>
</head>
<body>
<h3>HTML DOM Element emoveAttributeNode() Method</h3>
<p>Click the button below to remove the href attribute </p>
<a href="https://www.tutorialspoint.com" id="my">Visit Tutorialspoint</a>
<br><br>
<button onclick="removeHrefAttribute()">Remove href</button>
<div id="otpt"></div>
<script>
   function removeHrefAttribute() {
      const link = document.getElementById('my');
      const hrefAttr=link.getAttributeNode('href');      
      link.removeAttributeNode(hrefAttr);
      document.getElementById('otpt').textContent = 
      'href attribute removed successfully.';    
   }
</script>
</body>
</html>

The above program removes the "href" attribute from the anchor element.

Supported Browsers

Method
removeAttributeNode()	Yes	Yes	Yes	Yes	Yes

html_dom_element_reference.htm

Print Page