jQuery remove CSS inline style attribute with example.

jQuery remove inline style CSS: Here in this article, we learn how in jQuery we remove inline style CSS property. While developing a website if we have used any themes for our design, we have found that our HTML tags may be div tag or any other element have some unnecessary inline style.

These inline style makes our page design dirty. To fix this design issue we need to remove all the inline style, and doing this manually is a tedious task. But with jQuery, we can achieve it with few lines of code. So later we can add our own CSS styling to make it look like as per our requirement.

Two different approach to clear inline style CSS in jQuery.

• Use removeAttr() to remove all inline style attribute.
• Use css() to remove specific CSS property.

Let's see both approaches one by one.

# Using jQuery .removeAttr() to remove all inline style.

To remove or delete all the inline style property from our webpage, we simply use jQuery removeAttr() method.  Using this method it will remove one or more attribute from the selected elements.

Here we have a div tag contain many CSS property as written below, And now using .removeAttr() will remove all its inline style.  Basically we code in jQuery to clear CSS all properties.
HTML:

<div id="foo" style="color:blue;height:100px;width:200px;background-color:#e2e2e2;">
	<p>hello world</p>
</div>
<button id="btn_1">Remove All Inline Style</button>
<button id="btn_2">Remove Inline Style width</button>

jQuery: Heres the jquery code where on button click, we remove all the inline style property of our div element.

$("#btn_1").on('click', function() {
 $("#foo").removeAttr("style");
});

View Demo

# Using jQuery .css() method to remove specific CSS property.

In the previous example, we learn how to clear all inline style property. But what if we want to remove one specific property. For example, if we want to remove only width from inline style, or if we want to remove  only height from it.

For that we use the jQuery .CSS() method, this method sets or returns one or more style properties for the selected elements. As we want to remove width property so we use .css() method and set width as blank. By doing this it will remove width from the inline style. Same we can do for height, top , left position respectively

jQuery: Here on button click we use .css() method to remove width from inline style. 

Code as written below.

$("#btn_2").on('click', function() {
  $("#foo").css("width", "");
});

View Demo

Conclusion: Here we learn about how to use .removeAttr() and .CSS() method to remove or manipulate inline CSS style. And able to customize our web page styling. Inshort we able to remove all style attribute or specific CSS property like to modify height, width, color etc.

Other Reference:

• jQuery .CSS() method
• jQuery .removeAttr() method
  
  

You can also check these articles:

1. Preview Image before upload it with jQuery in Asp.net.
2. How to get the filename, size, type count in jQuery [input file, File Api].
3. Create dynamic HTML table using jQuery.
4. JQuery  delete table row tr on button click.
5. JQuery: How to disable Button, Div, Anchor tag.

Thank you for reading, pls keep visiting this blog and share this in your network. Also, I would love to hear your opinions down in the comments.

PS: If you found this content valuable and want to do a favor, then Buy me a coffee