Remove Only One Inline Style Property With jQuery Examples

At some point of time or the other, you may have come across an element that has inline styles applied to it with multiple properties and their respective values. So do you know of a way to remove a specific property and retain the rest? If not, this article is for you. In this article, I am going to share share a very easy way to do so. Follow along for more info.

How to remove a specifc inline property using jQuery

Let’s look at how to do this by means of an example. Assume that you have a div with ID “my_div“. This div has four properties such as width, height and background color and color applied inline to it. So it would look something like this:

<div id="my_div" style="width: 50%; height: 50%; background-color:red; color:green;">
This is my div with a background
</div>

Now you would like to remove the background-color property alone and leave the other properties with their respective values as it is. In order to so, here’s what you would need to do:

$('#my_div').css("background-color", "");

Considering the above example, if you just wanted to remove the height property of the div and retain the others as they are, here’s what needs to be done:

$('#my_div').css("height", "");

So you see, it’s very easy to remove any specific property along with its value applied to any element when inline styles are applied to the element.

NOTE:

One thing to remember is that removing any property in the way indicated above, will not overwrite the stylesheet itself. That means, your styles will be intact in the stylesheet. The targeted inline property will be just removed from the element in the DOM.

That’s it!

Has this post helped you? Feel free to suggest by commenting below.