Computer >> Computer tutorials >  >> Programming >> HTML

HTML DOM removeAttributeNode() Method


The HTML DOM removeAttributeNode() method removes the attribute specified in its parameter from the specified element in an HTML document and return the removed attribute as an Attr Node Object.

Syntax

Following is the syntax −

node.removeAttributeNode(attributeNode);

Example

Let us see an example of removeAttributeNode() method −

<!DOCTYPE html>
<html>
<head>
<style>
   html{
      height:100%;
   }
   body{
      text-align:center;
      color:#fff;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
      height:100%;
   }
   .btn{
      background:#0197F6;
      border:none;
      height:2rem;
      border-radius:2px;
      width:35%;
      margin:2rem auto;
      display:block;
      color:#fff;
      outline:none;
      cursor:pointer;
   }
</style>
</head>
<body>
<h1>DOM removeAttributeNode() method Demo</h1>
<p style="color:#db133a;font-size:1.2rem;">Hi! I'm a para element in HTML with some random text</p>
<button onclick="remove()" class="btn">Remove Attribute</button>
<script>
   function remove() {
      var p=document.querySelector("p");
      var pAtt=p.getAttributeNode("style");
      p.removeAttributeNode(pAtt);
   }
</script>
</body>
</html>

Output

This will produce the following output −

HTML DOM removeAttributeNode() Method

Click on “Remove Attribute” button to remove style attribute from <p> element.

HTML DOM removeAttributeNode() Method