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 −

 Live Demo

<!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 −

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

Updated on: 30-Jul-2019

49 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements