jQuery - remove a class that is in an array

Question

I have a div object

<div class="class1 classA classB class2"> content </div>

and some buttons

<button id="numbers">clickme N </button>

<button id="alphas">clickme A </button>

The code should do this function:

<script>
    var classesN = [class1, class2, class3];
    var classesAlpha = [classA, classB, classC];

    $('#alphas').click(function() {
       $('div').removeClass(all classes that are in the classesAlpha array);
    });
    $('#numbers').click(function() {
       $('div').removeClass(all classes that are in the classesN array);
    })
</script>

Thanks for any suggestion and I hope you like the question :)

Why are there spaces between your brackets and your tag identifiers? Tested in IE, Firefox, and Chrome. I don't know what editor or IDE you're using, but it's spitting out invalid html. — Daedalus, Jul 08 '12 at 06:55
http://stackoverflow.com/questions/11279835/delete-all-classes-after-a-certain-class ?? `:)` similar one, hmm — Tats_innit, Jul 08 '12 at 07:01
Similar because in both cases is about removing classes, just with different function. — thednp, Jul 08 '12 at 07:45

score 16 · Answer 1 · edited Jul 08 '12 at 07:01

16

.removeClass( [className] ):classNameOne or more space-separated classes to be removed from the class attribute of each matched element.

So, join all the classes you want to remove into a space separated list.

var classesN = [class1, class2, class3];
var classesAlpha = [classA, classB, classC];

$('#alphas').click(function() {
   $('div').removeClass(classesAlpha.join(' '));
});
$('#numbers').click(function() {
   $('div').removeClass(classesN.join(' '));
});

edited Jul 08 '12 at 07:01

Daedalus

7,586
5
36
61

answered Jul 08 '12 at 06:57

Sinetheta

9,189
5
31
52

1

The original code implies that the arrays should be arrays of strings, but even in the original code they are not. If they are variables representing strings, this will work, but I suspect the original question should also have them as arrays of strings. – Greg Pettit Jul 08 '12 at 07:02
they have to be **something**, I'm comfortable assuming that he just didn't think to include brackets because there really aren't a whole lot of sensible alternatives. Any other primitive has a reasonavle .toString(). Objects? of what? – Sinetheta Jul 08 '12 at 07:04
1

Danny, it will work (I should've posted the fiddle!), but remember to make sure your arrays compatible. Sinetheta, that's not quite what I meant... I just meant that the original question probably has an error in the code. – Greg Pettit Jul 08 '12 at 07:06
what about the answer below, looks more clean to me :) – thednp Jul 08 '12 at 07:12
I was going to provide an answer almost identical to undefined's (it matches my personal default way of thinking!), but this is actually cleaner and more efficient. undefined's uses an iterator, which it turns out isn't actually necessary. Note also that his sample code is only for alphas; you'd duplicate the functionality for numbers or build it out into a larger utility function. Pick whatever you want, though! – Greg Pettit Jul 08 '12 at 07:18

Ram · Accepted Answer · 2014-07-15T05:31:57.150

7

var classesN = ["class1", "class2", "class3"];
var classesAlpha = ["classA", "classB", "classC"];

$('#alphas').click(function() {
    var $div = $('div');
    $.each(classesAlpha, function(i, v){
       $div.removeClass(v);
    });
});

DEMO

edited Jul 15 '14 at 05:31

answered Jul 08 '12 at 07:00

Ram

143,282
16
168
197

I like this answer too, I cannot decide now :| – thednp Jul 08 '12 at 07:13
1

So ai am going to pick this one as the best. Congrats @undefined, you got a score again – thednp Jul 08 '12 at 07:27
2

This is half an answer. I'm not sure how iterating unnecessarily makes code "cleaner". – Sinetheta Jul 08 '12 at 08:34

score 2 · Answer 3 · answered Aug 31 '13 at 17:55

Or can without array and join() function. only need assign classes to variable

var classesN = "class1 class2 class3";
var classesAlpha = "classA classB classC";

$('#alphas').click(function() {
   $('div').removeClass(classesAlpha);
});
$('#numbers').click(function() {
   $('div').removeClass(classesN);
});

jQuery - remove a class that is in an array

3 Answers3