282
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?

2
  • 1
    Also, please try Google before posting here. I have no doubt the first result for the exact title you posted here would return an acceptable result. I have no idea where you got .removeProperty() from.
    – Christian
    Feb 23, 2012 at 1:20
  • 5
    @Christian Varga, whats funny is, now that he has posted this question, it IS the first google result. The second result is another correct stack overflow answer. Third is "removeProp()" and fourth is "removeAttr()", both of those are wrong. Nov 26, 2019 at 0:42

12 Answers 12

522

You can remove them by:

$(".icha0").css({ 'background-color' : '', 'opacity' : '' });
4
  • 45
    It's a bit too late to answer but I think this is important. You must keep in mind that this will only remove the element's attributes defined in the "style" attribute. This will NOT take any effect If they are assigned to a class or similar. Sep 25, 2016 at 22:09
  • 24
    If you need to remove a property set via a class, you can set to 'inital' instead of '' Feb 6, 2017 at 10:49
  • 1
    If a property has been set in a class in a stylesheet, none of these methods will work. The only thing that's worked for me is to use removeClass() to remove the class from the element altogether.
    – clayRay
    Aug 26, 2020 at 2:18
  • You can also pass CSS properties in camelCase JS variables naming convention as follow: $(".icha0").css({ backgroundColor : '', opacity : '' });
    – Kh An
    Oct 5, 2021 at 11:57
114

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,

1
  • 23
    From jqeury css: "It does not, however, remove a style that has been applied with a CSS rule in a stylesheet or <style> element"
    – eggmatters
    Jan 28, 2015 at 20:08
56

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.

1
  • 5
    $('.className').style.propertyName = ''; must be $('.className')[0].style.propertyName = ''; - but it's abolutly nonsense
    – SuperNova
    May 6, 2014 at 7:18
33

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');
1
  • 1
    Helped removed jagged edges due to nested 3d perspectives. I was frustrated trying to remove one of the perspectives in order to fix the anti alias issue, this post saved my day! Thank you! Sep 29, 2017 at 9:46
19

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

with jquery

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

withoyt jquery

document.getElementById("ID").removeAttribute("style")
1
  • 1
    Exactly what I was looking for May 24, 2021 at 16:17
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":""});
1
  • 3
    There is nothing new in this answer, it's pointless to repeat other answers. Nov 2, 2017 at 12:27
6

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

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

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

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

Thanks.

3
<script>
        require(['jquery', 'domReady!'], function($) {
            if ($('#p_method_use_reward_points').prop('checked')) {
                $('.test').show();
                console.log('working');
            }else{
                $('.test').hide();
                console.log('not working');
            }
            $('#submit_reward').on('click', function (e){
                let getPoints = $('#custom_reward_set').val();
                let checkField = $('#custom_reward_set').prop("readonly");
                // alert(getPoints);
                if (!getPoints){
                    alert('PLease add reward points');
                }
                if (getPoints) {
                    $("#custom_reward_set").prop("readonly", !$("#custom_reward_set").attr('readonly'));
                    if ($('#custom_reward_set').is('[readonly]')) {
                        $("#custom_reward_set").css({
                            "background-color": "#EBEBE4",
                            "border": "1px solid #ABADB3", "cursor": "not-allowed"
                        });
                    }else{
                        $('#custom_reward_set').removeAttr('style');
                    }
                }
               e.preventDefault();

            })
        });
    </script>
2

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.