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

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
– Christian, Commented Feb 23, 2012 at 1:20
@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. — rocketsarefast
– rocketsarefast, Commented Nov 26, 2019 at 0:42

Nevin · Accepted Answer · 2012-02-23 01:09:10Z

530

You can remove them by:

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

answered Feb 23, 2012 at 1:09

Nevin

7,8391 gold badge25 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

José Carlos Over a year ago

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.

James Brierley Over a year ago

If you need to remove a property set via a class, you can set to 'inital' instead of ''

clayRay Over a year ago

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.

Fish Over a year ago

You can also pass CSS properties in camelCase JS variables naming convention as follow: $(".icha0").css({ backgroundColor : '', opacity : '' });

Mahmoud Gamal · Accepted Answer · 2012-02-23 01:09:22Z

115

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,

answered Feb 23, 2012 at 1:09

Mahmoud Gamal

80.2k18 gold badges143 silver badges168 bronze badges

1 Comment

eggmatters Over a year ago

From jqeury css: "It does not, however, remove a style that has been applied with a CSS rule in a stylesheet or <style> element"

3Gee · Accepted Answer · 2013-11-20 08:31:18Z

58

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.

answered Nov 20, 2013 at 8:31

3Gee

1,1732 gold badges14 silver badges23 bronze badges

1 Comment

SuperNova Over a year ago

$('.className').style.propertyName = ''; must be $('.className')[0].style.propertyName = ''; - but it's abolutly nonsense

Jivings · Accepted Answer · 2012-02-23 01:27:35Z

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

edited Feb 23, 2012 at 1:27

answered Feb 23, 2012 at 1:08

Jivings

23.3k7 gold badges63 silver badges102 bronze badges

1 Comment

Richard Yan Over a year ago

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!

Rodgath · Accepted Answer · 2019-11-10 03:11:19Z

20

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

answered Nov 10, 2019 at 3:11

Rodgath

5855 silver badges9 bronze badges

Comments

Vitalicus · Accepted Answer · 2021-02-24 23:08:47Z

9

with jquery

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

withoyt jquery

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

answered Feb 24, 2021 at 23:08

Vitalicus

1,41818 silver badges18 bronze badges

1 Comment

Vibhor Dube Over a year ago

Exactly what I was looking for

Daniel Dewhurst · Accepted Answer · 2018-02-14 18:32:03Z

7

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

edited Feb 14, 2018 at 18:32

Daniel Dewhurst

2,6032 gold badges24 silver badges40 bronze badges

answered Jul 6, 2017 at 19:49

Rajeev

791 silver badge5 bronze badges

1 Comment

user447356 Over a year ago

There is nothing new in this answer, it's pointless to repeat other answers.

karel · Accepted Answer · 2019-03-29 23:11:14Z

7

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

edited Mar 29, 2019 at 23:11

karel

5,96562 gold badges58 silver badges60 bronze badges

answered Mar 29, 2019 at 22:47

Jortega

3,8081 gold badge22 silver badges23 bronze badges

Comments

Andrew · Accepted Answer · 2020-10-14 14:31:46Z

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

edited Oct 14, 2020 at 14:31

answered Jun 4, 2018 at 20:53

Andrew

20.4k13 gold badges110 silver badges122 bronze badges

Comments

Kawsik Roy · Accepted Answer · 2019-05-08 01:46:23Z

4

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

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

Thanks.

answered May 8, 2019 at 1:46

Kawsik Roy

411 bronze badge

Comments

moazzams · Accepted Answer · 2022-06-01 07:34:41Z

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

Azzabi Haythem · Accepted Answer · 2019-07-15 14:53:52Z

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

edited Jul 15, 2019 at 14:53

answered Apr 3, 2019 at 12:57

Azzabi Haythem

2,4237 gold badges31 silver badges32 bronze badges

Collectives™ on Stack Overflow

How to remove css property in jQuery

12 Answers 12

4 Comments

1 Comment

1 Comment

1 Comment

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

4 Comments

1 Comment

1 Comment

1 Comment

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related