jQuery remove inline style attribute with example

satinder singh / Updated : / 0 Comments

jQuery remove inline style: 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. And this 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 in jQuery.

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

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.


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

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

$("#btn_1").on('click', function() {
Try It Yourself ⇒

# Using jQuery .css() method to remove specific inline style.

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 width from inline style, or if we want to remove 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.

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", "");
Try It Yourself ⇒

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:

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. How to remove table row tr in jquery on button click.
  5. Jquery: How to disable Button, Div, Anchor tag.

Hope you enjoyed this tutorial. If you have any recommendations, please let us know what you think in the comment section below! See you again next time!

Post Comment

Your email address will not be published. Required fields are marked *