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

Corbel

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. – Inflatable

I may not have formatted the code properly – Corbel

#11280335 ?? :) similar one, hmm – Heppman

Similar because in both cases is about removing classes, just with different function. – Corbel

Answer 1

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

Blus

I like this answer too, I cannot decide now :| – Corbel

So ai am going to pick this one as the best. Congrats @undefined, you got a score again – Corbel

This is half an answer. I'm not sure how iterating unnecessarily makes code "cleaner". – Crater

Answer 2

.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(' '));
});

Crater

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. – Simplicity

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? – Crater

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. – Simplicity

what about the answer below, looks more clean to me :) – Corbel

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! – Simplicity

Answer 3

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);
});

Mammillary