Javascript / jQuery: How do I remove a range of numbered classes?

Question

Possible Duplicate:
Remove all classes that begin with a certain string

I have a script which adds one of six classes randomly to the body. The classes are numbered between 1 and 6, like this:

theme-1 to theme-6.

I need a clean way to remove all of them. Right now I have this:

$('body').removeClass('theme-1');
$('body').removeClass('theme-2');
$('body').removeClass('theme-3');
$('body').removeClass('theme-4');
$('body').removeClass('theme-5');
$('body').removeClass('theme-6');

But it's kind of clunky right? Is there a way I can say "remove any classes between theme-1 to theme-6"?

score 3 · Accepted Answer · edited Feb 01 '13 at 16:30

3

You can use the loop index to generate class names.

classes = ""
for(i=1; i < 7; i++)
   classes += 'theme-' + i + " ";
$('body').removeClass(classes);

edited Feb 01 '13 at 16:30

Gilles 'SO- stop being evil'

104,111
38
209
254

answered Feb 01 '13 at 16:07

Adil

146,340
25
209
204

1

Why call `.removeClass` function 6 times when it can accept multiple class and remove it all in 1 call? – Selvakumar Arumugam Feb 01 '13 at 16:10
Thanks Vega, I removed this. – shrewdbeans Feb 01 '13 at 16:26

score 1 · Answer 2 · answered Feb 01 '13 at 16:07

1

You could combine it all in to one line:

$('body').removeClass('theme-1 theme-2 theme-3 theme-4 theme-5 theme-6');

Or use a loop, though if the classes are always between 1 and 6 the loop seems like overkill personally.

answered Feb 01 '13 at 16:07

Anthony Grist

38,173
8
62
76

score 0 · Answer 3 · answered Feb 01 '13 at 16:07

0

You could clear them in a loop, which is, at least, a little cleaner.

answered Feb 01 '13 at 16:07

Matt Burland

44,552
18
99
171

Joseph Silber · Answer 4 · 2013-02-01T16:15:18.970

If you don't know how many of those you might have, you should use a regex:

document.body.className = document.body.className.replace(/(^| )theme-\d+( |$)/g, ' ');

If you want to stay within the jQuery API, use this:

$('body').attr('class', function (i, className) {
    return className.replace(/(^| )theme-\d+( |$)/g, ' ');
});

If you don't have any other classes on the body, you can remove them all in one fell swoop:

$('body').removeClass();

score 0 · Answer 5 · edited May 23 '17 at 12:27

0

Answer posted here. The code from Pat is as follows:

$('body')[0].className.replace(/\theme-.*?\b/g, '');

But this answer from Prestaul looks good as well. Use this function:

function removeClassByPrefix(el, prefix) {
    var regx = new RegExp('\\b' + prefix + '.*?\\b', 'g');
    el.className = el.className.replace(regx, '');
    return el;
}

edited May 23 '17 at 12:27

Community

1
1

answered Feb 01 '13 at 16:10

Giacomo1968

25,759
11
71
103

Then why haven't you closed this question as a duplicate? – Joseph Silber Feb 01 '13 at 16:11
Just flagged it as a dupe. Thanks so much for the tip! – Giacomo1968 Feb 01 '13 at 16:14

score 0 · Answer 6 · answered Feb 01 '13 at 16:11

0

$('body').removeClass('theme-1 theme-2 theme-3 theme-4 theme-5 theme-6');

http://jsfiddle.net/Yms5M/

answered Feb 01 '13 at 16:11

Roman Liutikov

1,338
10
17

Javascript / jQuery: How do I remove a range of numbered classes?

6 Answers6