The jQuery removeAttr() method can be used to remove the attributes from the selected elements. You can remove single or multiple attributes using the method.
Syntax of jQuery removeAttr() Method
The syntax of the method is given below.
Description of the Parameters
There are two parameters whose descriptions are given below.
| Parameter Name | Description |
|---|---|
| selector | It is used to select the elements to remove the attributes. You can use the tag name, class name, or id of the elements to select. |
| attribute | Specify the attributes of the element to remove. You can find the examples below to remove single as well as the multiple attributes. |
Let’s make it more clear with the examples given below.
jQuery removeAttr() Method Remove Single Attribute
To explain the removal of single attributes, let’s take an example given below. It contains a paragraph with a single class attribute to remove. A button element is using here to remove attribute on click.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> $(document).ready(function(){ $('.mybtn').click(function(){ $( ".mypara" ).removeAttr("class"); }); }); </script> <style> .mypara{ padding:10px; border:1px solid #ccc; } </style> <button type="button" class="mybtn">Click to Remove Attribute</button> <p class="mypara">This is my paragraph.</p> |
Output
This is my paragraph.
The class attribute applies the border and padding to the paragraph. Click the button given above to see the difference if the class gets removed.
Remove Multiple Attributes Using The Method
Similarly, the method can also remove multiple attributes from the selected elements.
The syntax for removing multiple attributes is given below.
Syntax
the above syntax contains the same parameters described above. You have to use only the multiple attributes as the parameter.
The below example contains the paragraph with multiple attributes class, id, and style. You have to remove these attributes using the jQuery removeAttr() method.
Example
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $('.mybtnmultiple').click(function(){ $( ".myparamultiple" ).removeAttr("class id style"); }); }); </script> <button type="button" class="mybtnmultiple">Click to Remove Multiple Attributes</button> <p class="myparamultiple" id="paraid" style="padding:10px;border:1px solid #ccc;background:yellow;color:red;">This is my paragraph with multiple attributes.</p> |
Output
This is my paragraph with multiple attributes.
Click the button above to remove the mentioned attributes as the parameters of the method. When you check the attributes of the elements, you can find them gets removed from the element.
I hope you like this tutorial on jQuery removeAttr() method. If you have any queries regarding the tutorial, please comment below.
References