HTML - DOM Element removeAttribute() Method

Quiz

The HTML DOM Element removeAttribute() method is used to remove any attribute that has been set on an HTML element within the DOM structure.

The removeAttribute() method is similar to the removeAttributeNode() method, but the key difference is that the removeAttribute() directly removes an attribute by its name, while the removeAttributeNode() requires an attribute node object as a parameter to remove it.

Syntax

Following is the syntax of the HTML DOM Element removeAttribute() method −

element.removeAttribute(attribute_name)

Parameters

This method accepts a single parameter as mentioned below:

Parameter	Description
attribute_name	A string that contains the name of the attribute to be removed.

Return Value

This method does not return any value.

Example 1: Removing class Attribute from p Element

The following program demonstrates the usage of the HTML DOM element removeAttribute() method. It removes the class attribute from the <p> element.

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element removeAttribute()</title>
<style>
   .highlight {
       color: green;
       font-weight: bolder;
       font-size: 25px;
   }
</style>
</head>
<body>
<h3>HTML DOM Element removeAttribute() Method</h3>
<p>Click the button to remove a class attribute!!</p>
<p id="myPara" class="highlight">This paragraph has a class attribute.</p>
<button onclick="removeClassAttribute()">Remove Class Attribute</button>
<div id="ot"></div>
<script>
   function removeClassAttribute() {
      const p=document.getElementById('myPara');
      p.removeAttribute('class');
      document.getElementById('ot').textContent = 'Class attribute removed!';
   }
</script>
</body>
</html>

The above program removes the "class" attribute from the "p" element.

Example 2: Removing href Attribute from Anchor (a) Tag

Following is another example of the HTML DOM Element removeAttribute() method. We use this method to remove the "href" attribute from the anchor (<a>) tag −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element removeAttribute()</title>
</head>
<body>
<h3>HTML DOM Element removeAttribute() Method</h3>
<p>Click the button to remove a href attribute!!</p>
<a href="https://www.tutorialspoint.com" id="myLink">Visit Tutorialspoint</a>
<button onclick="removeClassAttribute()">Remove href Attribute</button>
<div id="ot"></div>
<script>
   function removeClassAttribute() {
      const p = document.getElementById('myLink');
      p.removeAttribute('href');
      document.getElementById('ot').textContent = 'href attribute removed!';
   }
</script>
</body>
</html>

Once the above program is executed, it removes the "href" attribute from the anchor (a) tag (element).

Example 3: Adding and Removing readonly Attribute

The example below uses two different methods removeAttribute() and setAttribute() to remove and add an attribute to an element −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element removeAttribute()</title>
</head>
<body>
<h1>HTML DOM Element removeAttribute() Method</h2>
<p>Click the button to remove and add a "id" attribute!!</p>
<input type="text" id = "In" value="Initial value" readonly>
<button onclick="toggleReadonly()">Toggle Readonly Attribute</button>
<div id="ot"></div>
<script>
   function toggleReadonly() {
      const input=document.getElementById('In');
      if (input.hasAttribute('readonly')) {
         input.removeAttribute('readonly');
         document.getElementById('ot').textContent = 
		 'Readonly attribute removed!';
      } else {
         input.setAttribute('readonly', true);
         document.getElementById('ot').textContent = 
		 'Readonly attribute added!';
      }
   }
</script>
</body>
</html>

The above program adds and removes the "read-only" attribute dynamically.

Supported Browsers

Method
removeAttribute()	Yes	Yes	Yes	Yes	Yes

html_dom_element_reference.htm

Print Page