JavaScript removeAttribute method

JavaScript method removeAttribute() is used to remove attribute of an element. Most of the times it is used with the document.getElementById() method.

JavaScript removeAttribute method

JavaScript removeAttribute method

     

JavaScript method removeAttribute() is used to remove attribute of an element. Most of the times it is used with the document.getElementById() method.

 

 

 

 

 

Syntax:

 elementObject.removeAttribute("attributeName", flag);

Where "attributeName" is the name of the attribute which is to be removed and flag is the value which customizes the functionality of this removeAttribute() method. The flag value may be 0, 1 or and it is optional. Following are the meanings of their flag's value.

  Flag Value    Description
0  It is the default value and performs the non case sensitive search
1  It performs the case sensitive property search
2  It returns the property value as it is set in the script or html code

Description of code :

To illustrate removeAttribute() method we have created a HTML page into which we have created a text box and a button. We have first set the read only property of text box to be true. When user clicks on the button "Remove readonly attribute of TextBox" it calls the function defined in the JavaScript named removeAlignment().

  function removeAlignment(){
    var read = document.getElementById("txt")
        .removeAttribute("readonly",0);
    alert("textbox readonly attribute removed");
  }

Above lines of code describes the functionality of function removeAlignment(). It first takes the element object by using method document.getElementById(), thereafter we can apply removeAttribute() method. Here is the full example code as follows :

<html>
<body>
<script language="JavaScript">
  function removeAlignment(){
    var read=document.getElementById("txt")
        .removeAttribute("readonly",0);
	alert("textbox readonly attribute removed");
  }
</script>
<div style="background: #cf2255; width:'100%';" 
   align="center">
  <font color="#05ff20" size="12pt">
  <b>Remove Attribute Example</b>
  </font>
</div>
<center>
 <div id="divId" align="center" style="background: #ffffcc;
          width:'100%';">
 <input id="txt" type="text" readonly="true" />
    <p>Insert some text into text box</p>
      <input type="button" value="Remove readonly attribute 
    of TextBox" onclick="removeAlignment();">
  </div>
</center>
</body>
</html>

Output :

When you try to input some text into the text box, it doesn't allow you to input since it has read only attribute set to be true.

Click on the button "Remove readonly attribute of TextBox" to remove attribute "readonly" for the input text box.

Once the attribute "readonly" is removed we can insert text into text box.

Download Source Code