How to remove css property in jQuery

if(prev_clicked)
{	
    $("#accordion li a.category").css('background-image', 'url("img/off_all_channel.png")');					
    $("#accordion li a.comment").css('background-image', 'url("img/on_all_online.png")');					
    $(".icha0").removeProperty("background-color");
    $(".icha0").removeProperty("opacity");
}
else
{	
   $(".icha0").css("background-color","#D5D5D2");
   $(".icha0").css("opacity","0.70");
}

I am trying to remove two css properties that I added but It seems not working. Any though?

You can remove them by:

$(".icha0").css({ 'background-color' : '', 'opacity' : '' });

You can use .css() to remove css property as well, like this:

$(".icha0").css("background-color","");
$(".icha0").css("opacity","");

As mentioned in the jquery documentation:

> Setting the value of a style property to an empty string — e.g. $('#mydiv').css('color', '') — removes that property from an element if it has already been directly applied,

To remove the in-line CSS property use:

$('.className').css({propertyName: ''});

To remove the whole in-line style of an element use:

$('.className').removeAttr('style');

I've also found this suggestion to remove the CSS property from styles (separate file) use:

$('.className').style.propertyName = '';

BUT I couldn't get it to work at all, so I'm putting it here just FYI.

Either you can set the properties back to blank:

$(".icha0").css("background-color","");

Or you can change the code to use classes defined in a CSS file:

$(".icha0").addClass('properties'); 
$(".icha0").removeClass('properties');

I was having this problem but I have not seen any solution here that satisfies the OP. Most of the solutions suggest getting rid of the entire style attribute which is not worth it.

I used jQuery's prop method.

var styleObject = $('my-selector').prop('style'); 

styleObject.removeProperty('background-color');

Alternate option, that works around some problems.

Add a new class to the element, and give the properties the value inherit !important, eg:

css

.clearCSS {
    background-color: inherit !important;
}

jquery

$(".icha0").addClass('clearCSS'); 

This is literally a copy paste from this answer, and I use it to clear CSS style that I added with jQuery in a previously executed function.

To remove the in-line CSS property use:

$('.className').css({propertyName: ''});   

To remove the whole in-line style of an element use:

$('.className').removeAttr('style');

OR by ID:

$('#idName').removeAttr('style');

We have two ways, either you can directly remove the applied CSS style class which is applied to DOM element or remove the applied CSS style from element

//Remove the class associated with element

$('#ID').removeClass("cssClass");

//Remove the CSS style from DOM element

$('p').css({"color":""});

with jquery

  $('#ID').removeAttr("style")

withoyt jquery

document.getElementById("ID").removeAttribute("style")

To remove all CSS property in JQuery the following code can be use:

    $(".selector").removeClass().removeAttr('style');

Thanks.

if you need to remove and not update a specific property you can simply use removeProp and not removeProperty :

$(".icha0").removeProp("background-color");
$(".icha0").removeProp("opacity");