Introduction with JQUERY – Removing Attributes from HTML DOM Objects

Guest Posts Paolo Nikko Nuñal

In the previous articles, we have tackled how the remove() method works, in this section, we are going to deal with manipulating CSS classes without actually removing them but rather modifying them.  The removeAttr() method has been used by many programmers most especially in removing attributes.

The removeAttr() method can remove one or more attributes from a selected elements.


 Syntax

$("[SELECTOR]).removeAttr([ATTRIBUTE to be REMOVE]);

attribute - Required. This one specifies one or more attributes to be remove. To remove more than one attribute, you can separate it with a space.

Code


<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
   $("#btn-remove").click(function(){
      $("#input").removeAttr("disabled");
   });
});
</script>
</head>
<body>
<input id="input" value="INPUT BOX" disabled>
<button type="button" id="btn-remove">Remove Attribute</button>
</body>
</html>


In the example above, by clicking the "Remove" button, we remove the attribute "DISABLED" on the input box. This is especially useful if you are trying to disable something and you want it to be enable it during an event or if it met certain conditions.

Code


<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
   $("#btn-remove").click(function(){
      $("h3").removeAttr("style");
   });
});
</script>
</head>
<body>
<h3 style="color:red">H3 with RED color</h3>
<h3 style="color:blue">H2 with  BLUE color</h3>
<button type="button" id="btn-remove">Remove Attribute</button>
</body>
</html>


Based from the example above, we can also remove inline CSS elements. By clicking on the "Remove" button, the removeattr() method removes the style on all H3's. This is important especially if you want to manipulate HTML elements as it actually remove's attributes.

For more tutorials you can check out the courses from Dr. Richard Stibbard.




Learn HTML5/PHP/AJAX Web Programming from Scratch – An amazing course from Dr. Richard Stibbard. Usually I only promote my own courses, but this course is very impressive, so I cut a deal with Dr. Stibbard … You can also find Richard’s website here