Remove CSS from a Div using JQuery

I'm new to JQuery. In my App I have the following:

$("#displayPanel div").live("click", function(){
  $(this).css({'background-color' : 'pink', 'font-weight' : 'bolder'});
});

When I click on a Div, the color of that Div is changed. Within that Click function I have some functionalities to do. After all that I want to remove the applied Css from the Div. How could I do it in JQuery?

You can remove specific css that is on the element like this:

$(this).css({'background-color' : '', 'font-weight' : ''});

Although I agree with karim that you should probably be using CSS classes.

You could use the removeAttr method, if you want to delete all the inline style you added manually with javascript. It's better to use CSS classes but you never know.

> $("#displayPanel div").removeAttr("style")

Put your CSS properties into a class, then do something like this:

$("#displayPanel div").live("click", function(){
   $(this).addClass('someClass');
});

Then where your 'other functionalities' are do something like:

$("#myButton").click(function(){
   $("#displayPanel div").removeClass('someClass');
});

You can remove inline properties this way:

$(selector).css({'property':'', 'property':''});

For example:

$(actpar).css({'top':'', 'opacity':''});

This is essentially mentioned above, and it definitely does the trick.

BTW, this is useful in instances such as when you need to clear a state after animation. Sure I could write a half dozen classes to deal with this, or I could use my base class and #id do some math, and clear the inline style that the animation applies.

$(actpar).animate({top:0, opacity:1, duration:500}, function() {
   $(this).css({'top':'', 'opacity':''});
});

jQuery.fn.extend
({
    removeCss: function(cssName) {
        return this.each(function() {
            var curDom = $(this);
            jQuery.grep(cssName.split(","),
                    function(cssToBeRemoved) {
                        curDom.css(cssToBeRemoved, '');
                    });
            return curDom;
        });
    }
});

/*example code: I prefer JQuery extend so I can use it anywhere I want to use.

$('#searchJqueryObject').removeCss('background-color');
$('#searchJqueryObject').removeCss('background-color,height,width'); //supports comma separated css names.

*/

OR

//this parse style & remove style & rebuild style. I like the first one.. but anyway exploring..
jQuery.fn.extend
({
    removeCSS: function(cssName) {
        return this.each(function() {

            return $(this).attr('style',

            jQuery.grep($(this).attr('style').split(";"),
                    function(curCssName) {
                        if (curCssName.toUpperCase().indexOf(cssName.toUpperCase() + ':') <= 0)
                            return curCssName;
                    }).join(";"));
        });
    }
});

As a note, depending upon the property you may be able to set it to auto.

Actually the best way I have found to do this when having to do complex jquery based styling, for Example, if you have a modal that you need to display but it needs to calculate page offsets to get the correct parameters those will need to go into the a jQuery("x").css({}) function.

So here is the setting of the styles, the output of variables that have computed based on various factors.

$(".modal").css({ border: "1px solid #ccc", padding: "3rem", position: "absolute", zIndex: 999, background: "#fff", top: "30", visibility: "visible"})

In order to clear those styles. rather than setting something like

$(".modal").css({ border: "", padding: "", position: "", zIndex: 0, background: "", top: "", visibility: ""})

The simple way would be

$(".modal").attr("style", "")

When jquery manipulates elements on the dom, the styles are written to the element in the "style" attribute as if you were writing the styles inline. All you have to do is to clear that attribute and the item should reset to its original styles

Hope this helps

Set the default value, for example:

$(this).css("height", "auto");

or in the case of other CSS features

$(this).css("height", "inherit");

i have same prob too, just remove the value

<script>
      $("#play").toggle(function(){$(this).css("background","url(player.png) -100px 0px no-repeat");},
	  function(){$(this).css("background","");});
</script>

If you don't want to use classes (which you really should), the only way to accomplish what you want is by saving the changing styles first:

var oldFontSize = $(this).css("font-size");
var oldBackgroundColor = $(this).css("background-color");

// set style
// do your thing

$(this).css("font-size",oldFontSize);
// etc...

I used the second solution of user147767

However, there is a typo here. It should be

> curCssName.toUpperCase().indexOf(cssName.toUpperCase() > + ':') < 0

not <= 0

I also changed this condition for:

> !curCssName.match(new RegExp(cssName + > "(-.+)?:"), "mi")

as sometimes we add a css property over jQuery, and it's added in a different way for different browsers (i.e. the border property will be added as "border" for Firefox, and "border-top", "border-bottom" etc for IE).

Before adding a class you should check if it already had class with .hasClass() method

For your specific question. You should be putting your stuff in Cascading Stylesheet. It's best practice to separate design and functionality.

so the proposed solution of adding and removing class names is best practice.

however when you are manipulating elements you don't control of how they are rendered. removeAttr('style') is BEST way to remove all inline styles.

I modified user147767's solution a bit to make it possible to use strings, arrays and objects as input:

/*!
 * jquery.removecss.js v0.2 - https://stackoverflow.com/a/17196154/1250044
 * Remove multiple properties from an element in your DOM.
 *
 * @author Yannick Albert | #yckart
 * @param {Array|Object|String} css
 *
 * Copyright (c) 2013 Yannick Albert (http://yckart.com)
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php).
 * 2013/06/19
 **/

$.fn.removeCss = function (css) {
    var properties = [];
    var is = $.type(css);

    if (is === 'array') properties = css;
    if (is === 'object') for (var rule in css) properties.push(rule);
    if (is === 'string') properties = css.replace(/,$/, '').split(',');

    return this.each(function () {
        var $this = $(this);
        $.map(properties, function (prop) {
            $this.css(prop, '');
        });
    });
};

// set some styling
$('body').css({
    color: 'white',
    border: '1px solid red',
    background: 'red'
});

// remove it again
$('body').removeCss('background');
$('body').removeCss(['border']);
$('body').removeCss({
    color: 'white'
});

http://jsfiddle.net/ARTsinn/88mJF/