JavaScript removeAttributeNode() method

JavaScript's removeAttributeNode() method can be used as an alternate to the removeAttribute() method. It is used to remove attributes when you have a reference to the attribute object. Following is the syntax of using method removeAttributeNode() :

Syntax:

element_object.removeAttributeNode( attribute_reference );

Where attribute_reference is the reference to the attribute which is to be removed. But the point to be noticed is that this attribute is working for Internet Explorer 6 and higher versions only.

Description of code:

To illustrate the use of removeAttributeNode() method we have created a simple HTML page into which we have created a Text Box into which we have set the "readonly" attribute to be "true". After that we have created a button named "Remove Attribute Node( Read Only )" which calls the function removeAttributeNodeReadOnly() when clicked.

 function removeAttributeNodeReadOnly(){
   var attribute = document.getElementById("txt")
        .getAttributeNode("readonly",0);
   document.getElementById("txt")
        .removeAttributeNode(attribute);
   alert("Removed Attribute Node"); 
 }

In above lines of code we first take the reference to the attribute into a variable "attribute" using the method getAttributeNode(). Once we have reference to the attribute we can apply the method removeAttributeNode(attribute)

document.getElementById("txt").removeAttributeNode(attribute);

Here is the full example code as follows :

<html>
<body>
<script language="JavaScript">
 function removeAttributeNodeReadOnly(){
 var attribute = document.getElementById("txt")
        .getAttributeNode("readonly",0);
 document.getElementById("txt").removeAttributeNode(attribute);
 alert("Removed Attribute Node"); 
 } 
</script>
<div style="background: #ff9900; width:'100%';" 
    align="center">
  <font color="#0000ff" size="12pt">
	<b>Remove Attribute Node Example</b>
  </font>
 </div>
  <center>
    <div style="background: #0099ff; width:'100%';" 
        align="center">
	<input type="text" id="txt"  readonly="true" />
    </div>
      <input type="button" value="Remove Attribute 
    Node(Read Only)" onclick="removeAttributeNodeReadOnly();">
 </center>
</body>
</html>

Output :

When you tries to enter some text into the text field it doesn't allow to do so since its "readonly" property is true. Now click on the button "Remove Attribute Node( Read Only)". It will remove the attribute node by taking the reference to that element.

Now you can see that text box's read only attribute is removed. You can insert some text into text box.

You can also download full source code of the above given HTML file as follows:

Download Source Code

JavaScript removeAttributeNode() method

JavaScript removeAttributeNode() method

JavaScript removeAttributeNode() method

Tutorials