Remove CSS from a Div using JQuery

user_79980 0
Viewed 443221

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?

css jquery
13 Answers

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.

user_277820

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

user_590710

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');
});
user_703930 
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(";"));
        });
    }
});
Admin1

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...
user_1135700
Related