CODEWITHSUNDEEP
jquery
Steve
Steve

Reputation: 4898

How to remove all classes with jQuery?

I have some up/down buttons that increase/decrease the size of the selected text by adding a class to the containing element, like

<span class="font20">Some text</span>

The font20 class sets font-size:20px, font21 sets font-size: 21, etc.

I have another button "Clear Formatting" that needs to remove any classes I added. I could go through and see if font20 is applied and remove it if it is. If not, see if font21 is applied and remove it if it is, etc. and go through 50 or so possibilities. But what I'd rather do is something like

jQuery('selector').removeClass("*");

That is, remove all classes that may have been added. The removeClass("*") above doesn't seem to work. Is there another way to remove all the classes applied to a selector, using jQuery?

Thanks.

Upvotes: 13

Views: 11736

Answers (7)

Gr&#233;gory OBANOS
Gr&#233;gory OBANOS

Reputation: 1051

Just use 

jQuery('selector').removeClass();

to remove all the classes.

Upvotes: 24

Jane S
Jane S

Reputation: 1487

From the documentation:

If a class name is included as a parameter, then only that class will be removed from the set of matched elements. If no class names are specified in the parameter, all classes will be removed.

So simply using:

$('#whatever').removeClass();

will remove all classes from #whatever.

Upvotes: 11

Bas Groothedde
Bas Groothedde

Reputation: 402

Here's a piece of code with an example which will show you how you can solve this issue. I'm assuming that you only want to remove the classes matching a specific format (namely the font## format).

You can add a function to jQuery's object, which will be callable on a jQuery object. This function then will check for a list of classes the element contains and match each one of them against your pattern. 

(function($) {
    $.fn.removeMatchingClasses = function(expression) {
        var $element    = $(this);
        var classString = $element.attr('class');
        if(classString !== undefined) {
            $(classString.split(' ')).each(function() {
                var str = (this + '');
                if(str.match(expression)) {
                    $element.removeClass(str);
                }
            });
        }
    };
})(jQuery);

$(document).ready(function() {
    $("span").each(function() {
        // remove all classes from this element matching font(number)
        $(this).removeMatchingClasses(/^font([0-9]+)$/);
    });
});

This code will preserve all the non-matching classes of an element, and only remove the matching ones.

Some references:

Upvotes: 0

Precastic
Precastic

Reputation: 4001

If you want to only remove classes added via your buttons, then jQuery allows you to remove several (space separated) classes in 1 call:

selector$.removeClass("font1 font2 font3 fontx");

If you are happy removing all the classes regardless of whether you added them via your formatting buttons you could do:

selector$.removeClass();

Upvotes: 0

matthoiland
matthoiland

Reputation: 912

When I want to retain a base class and remove any dynamically added classes I'll do something like the following.

I'll add a data attribute on the element with the default classes.

<span class="default dynamic" data-class="default">Text</span>

Then, to reset it I'll simply apply the data-class element to the class.

var defaultClass = $('span').attr('data-class');
$('span').attr('class', defaultClass);

Upvotes: 3

astrocrack
astrocrack

Reputation: 304

Calling removeClass with no parameters will remove all of the item's classes. 

$("span").removeClass();

Upvotes: 2

John Bupit
John Bupit

Reputation: 10618

Use attr():

selector$.attr("class", "");

Upvotes: 5

Related Questions