How to remove css property in jQuery

Question

if(prev_clicked)
{   
    $(\"#accordion li a.category\").css(\'background-image\', \'url(\"img/off_all_channel.png\")\');                    
    $(\"#accordion li          


        

Answer 1

You can remove them by:

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

Answer 2

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,

Answer 3

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'); 

Answer 4

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");

Answer 5

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.

Answer 6

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":""});