Using JQuery removeClass() to remove all classes but one

Question

Okay, I've got an interesting one (well, interesting to me, anyway :) ).

I've got a situation where I have a div with a static class value, but it also can have a single, "secondary class" assigned that is dynamic. When the user makes a selection, any existing secondary class needs to be removed and the new class added.

Ignoring using an id value (standards for the project use the class . . . can't be changed), is there an elegant way to simply ignore the first class and remove whatever other class is there, before adding the new one?

Example Starting HTML:

<div class="staticClass dynaClass1" />

Example JS:

function updateClass(newSecondaryClass) {
    $(".staticClass") . . . **** remove any class besides "staticClass" ****
    $(".staticClass").addClass(newSecondaryClass);
}

If the function is called using updateClass("dynaClass2");, the resulting HTML should be:

<div class="staticClass dynaClass2" />

I can think of ways of doing it involving just removing all classes using removeClass(); and adding "staticClass" back in when adding the new class, or using attr("class", "staticClass " + newSecondaryClass);, but I'm wondering if there isn't a way to handle it without having to touch the static class at all?

In the end, I guess this is an academic question, more than anything . . . just seems like it's something that should be doable, but I don't know how to do it. :D

Is `staticClass` known beforehand or we must handle as such whatever class name comes first? — Álvaro González, Jan 14 '13 at 16:17
try this : http://stackoverflow.com/questions/3452778/jquery-change-class-name — Jignesh, Jan 14 '13 at 16:18
Note that thinking in terms of "first class" and "other class" is a little off-base; there's no order to classes in the set of those present for an element. — Pointy, Jan 14 '13 at 16:19
Removing all classes and re-assigning that specific class is indeed the most "elegant" way. jQuery doesn't offer any *pattern* match for those methods. — jAndy, Jan 14 '13 at 16:19
Álvaro - Well, the class is used as the selector, so it would be known, but ideally, it would not be hard-coded, so that it could be reused more easily. Maybe passed in as a second parameter to the function. — talemyn, Jan 14 '13 at 16:20
Pointy - fair enough . . . just trying to differentiate between the two "types" of class in the example . . . you are correct, that the order is unimportant in this situation. — talemyn, Jan 14 '13 at 16:22
To answer your question, yes you have to touch the static class. The browser isn't simply going to know that staticClass is supposed to stay there, you need to tell it. Just like you are going to tell it to remove the tertiary class and add a new one. — Scott Sword, Jan 14 '13 at 16:24
@jAndy not true, look at my answer. Removing and reassigning is not the best solution. If for example `display: block` and `display:none` are bound to a class, assigning and reassigning might result in a flicker. — Beat Richartz, Jan 14 '13 at 16:25
@BeatRichartz: I commented your answer. I'm aware of *regex* solutions, but I'd never say thats more "elegant". But then again, that might be personal opinion. — jAndy, Jan 14 '13 at 16:27
@jAndy with a `removeClass.addClass` chain, removeClass would have to be given *all* the classes to be removed, which is potentially a very long string, which is not very elegant. Also a personal opinion. — Beat Richartz, Jan 14 '13 at 16:34
@BeatRichartz: nope, calling `.removeClass()` without arguments will clean *any* class name. — jAndy, Jan 14 '13 at 16:35
@Beat Richartz: The "flicker issue" is exactly why I was looking for a way to avoid touching the static class. In the particular case that got me thinking about this, there can be a lot of styles associated with the static class, so I'd rather not ever have it "unassigned", even for the shortest moment. — talemyn, Jan 14 '13 at 16:35
@talemyn If flickering is no option, use the function / regexp solution. If you do the regexp right, its surely what you're looking for. `removeClass.addClass` may be more readable, but it has its bad sides. — Beat Richartz, Jan 14 '13 at 16:38
So, in the end, it seems like, if you want to avoid touching the static class as much as possible, there are two options: (1) use `.removeClass()` and give it a function that dynamically determines which of the current classes to remove, or (2) use the more generic `.attr('class', '')` Excellent . . . thanks for the discussion. Not sure which answer to select since it seems like a combination of multiple ones. — talemyn, Jan 14 '13 at 18:28

score 11 · Answer 1 · answered Jan 14 '13 at 16:17

11

You can remove all classes and add the one you want to leave:

$(".staticClass").removeClass().addClass('staticClass');

Calling removeClass() without a parameter removes all classes.

If you don't want to do that then you can simply modify the class attribute:

$(".staticClass").attr('class', 'staticClass');

answered Jan 14 '13 at 16:17

Konstantin Dinev

34,219
14
75
100

4

Cool, but this guy has thought of that anyway ( look @ the end of the question ) – drinchev Jan 14 '13 at 16:19
@drinchev I should read the questions until the end I guess. I updated with a different suggestion. – Konstantin Dinev Jan 14 '13 at 16:21
This method doesn't allow for the possibility of an element that doesn't already have 'staticClass' from not getting it added when that may not be your intention. That is to say `
` would become `
`, but to be true to the concept of removing all classes except a specified class, the result in this example should be `
`. Passing a RegEx replace function to `.removeClass()` allows the selected element to keep the specified class if it has it, but removes all classes for the element that doesn't already have the specified class.
– gfullam May 08 '15 at 05:14

Beat Richartz · Accepted Answer · 2014-06-28T15:57:05.547

5

You can pass a function to remove class, which returns all but the static Classes:

$('.staticClass').removeClass(function(index, klass) { 
  return klass.replace(/(^|\s)+staticClass\s+/, ''); 
})

This is returning all the classes that are on the object, without the static one, and therefore removes all classes but the static one.

edited Jun 28 '14 at 15:57

answered Jan 14 '13 at 16:22

Beat Richartz

9,474
1
33
50

two problems with that. First, it won't create a *space* if there is any *class* / *word* coming after the matched string and second, it would also match `foostaticClassbar`. – jAndy Jan 14 '13 at 16:26
@jAndy you're right about the match, but wrong about the space creation. The return value is passed to removeClass, where jQuery takes over and assigns the new values. – Beat Richartz Jan 14 '13 at 16:32
This is the kind of the thing that I think I was looking for, but jAndy makes good points about the having to handle the placement of the static class in the returned group. – talemyn Jan 14 '13 at 16:32
@talemyn jQuery does take over the return value and passes it to `removeClass`. The function only replaces the static value in the string by nothing, therefore assuring that jquery only removes the classes in the returned string. – Beat Richartz Jan 14 '13 at 16:40
FYI - while the `.attr('class', '')` approach is likely the most efficient way to handle the particular situation, this answer really addressed what I was looking for, which was a way to exclude classes using `removeClass()`. Thanks to everybody for the input. – talemyn Jan 15 '13 at 15:44
The concept is sound, but the RegEx needs improvement. I posted an update that addresses the issue. Also, this method is necessary when you don't want to replace the existing classes with other classes as in `.attr('class', '')`, but instead just want to remove those that don't match a list of classes. – gfullam Jun 27 '14 at 19:42
Why invoke `$(this).attr('class')` inside the function when the original class is already passed to that function as a parameter? – Alnitak Jun 27 '14 at 19:58

gfullam · Answer 3 · 2015-03-25T15:12:02.063

Pass a function to `.removeClass()`

A revision of Beat Richartz's answer on this page.

Note: I tried to post this as an edit and it was rejected. The concept is identical, with an improved RegEx.

Improved RegEx provides word-boundary matching with multiple classes

// Remove all classes except those specified
$('span').removeClass(function () { 
    return $(this).attr('class').replace(/\b(?:hello|world)\b\s*/g, ''); 
});

Before:

<span class="hello foo">hello</span> <span class="world bar">world</span>`

After:

<span class="hello">hello</span> <span class="world">world</span>`

Try it: http://jsfiddle.net/gfullam/52eeK/3/

Try it as a jQuery plugin: http://jsfiddle.net/gfullam/52eeK/5/

FWIW: This method is necessary when you don't want to replace the existing classes with other classes as in .attr('class', '<final list of classes>'), but instead just want to remove those that don't match a list of classes.

And the opposite - if you just want to remove classes that do match a list is: `$('span').removeClass('hello world');` — A2D, Sep 18 '14 at 14:10

score 2 · Answer 4 · answered Jan 14 '13 at 16:20

2

You can set it's required classes using the .attr() function. So:

$('.staticClass').attr('class','<any classes required');

This will replace any classes that were originally there, and add the new ones.

answered Jan 14 '13 at 16:20

chrisbradbury

327
1
5

score 0 · Answer 5 · answered Jan 14 '13 at 16:28

0

All of your classes are manipulated by calling the Javascript DOM element.className, so basically jQuery's addClass just replaces that string. You can see that in the Github source.

Which all means that if you call

$('.staticClass').addClass('someClass');

The element.className is replaced anyway, but with the new class included. ( this means that your staticClass is actually touched :)

When you call

$('.staticClass').removeClass().addClass('staticClass');

you will replace that string twice and there is no problem doing that.

answered Jan 14 '13 at 16:28

drinchev

19,201
4
67
93

I guess my concern with using a default "removeClass" here would be the extra interval (however brief) when the static class was unassigned to the div, meaning that any styles associated with it would be gone. But I see your point about how the static class will always be "touched" when using "addClass". – talemyn Jan 14 '13 at 16:45

Using JQuery removeClass() to remove all classes but one

5 Answers5

Pass a function to `.removeClass()`

A revision of Beat Richartz's answer on this page.

Linked

Related

Using JQuery removeClass() to remove all classes but one

5 Answers5

Pass a function to .removeClass()

A revision of Beat Richartz's answer on this page.

Linked

Related

Pass a function to `.removeClass()`