Last Updated on September 15, 2022 by Roshan Parihar
In this tutorial, learn how to remove style attribute from an element in jQuery. The short answer is to use the removeAttr() function and pass the style attribute as its argument.
You can also use the attr() or prop() function of jQuery to perform this task. Let’s find out with the examples given below.
Method 1: jQuery Remove Style Attribute with removeAttr() Function
To remove the style attribute from an element, you can use the removeAttr() function that takes a single argument as style attribute to remove. It will remove all the CSS applied to the element using the style attribute.
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $('button').click(function(){ $("p").removeAttr("style"); }); }); </script> <p style="color: red; border:1px solid blue; padding:5px;">This is a paragraph.</p> <button type="button">Remove Style Attribute</button> |
Output
This is a paragraph.
The above example contains the paragraph element text content and the button element. The text content contains some CSS applied to it using the style attribute. When you click the button element, the removeAttr() function removes the style attribute along with the CSS present in it.
Method 2: Using prop() Function
If you want to remove the style attribute from the paragraph element, you can use the prop() function and pass two arguments to it in comma separation. The first argument is the style attribute within double quotes (" " ). The second is the blank content within the double quotes (” “) to make the attribute blank.
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $('button').click(function(){ $("p").prop("style",""); }); }); </script> <p style="color: #fff; background: orange; padding:5px;">This is a second paragraph.</p> <button type="button">Remove Style Attribute</button> |
Output
This is a second paragraph.
To remove all the CSS applied to the element using the style attribute, you can click the button given above. The resulting output after the button click is the text content without any CSS.
Method 3: How to Remove Style Attribute Using attr() Function of jQuery
In addition to the above examples, you can also use attr() function of jQuery to remove style attribute from an element. It takes the same two arguments as we are using in the above example. That means, the first is the "style" attribute and the second is blank quotes (" ").
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $('button').click(function(){ $("p").attr("style",""); }); }); </script> <p style="color: orange; border:2px solid green; padding:10px;background: grey;">This is a third paragraph.</p> <button type="button">Remove Style Attribute</button> |
Output
This is a third paragraph.
Now, The above example contains some text content with some CSS applied using the style attribute. You can click the button given above to remove all the CSS from the element.
You May Also Like to Read
- Add Class on Hover and Remove on MouseOut with jQuery
- How to Remove Anchor tag Link from Div Using jQuery
- jQuery Add Style to HTML Element and Apply CSS
- jQuery Remove Disabled Attribute with Examples
Reference