How to remove all instances of a class in javascript/jquery?

Question

I have this class called .m-active that is used multiple times throughout my HTML.

Basically what I want to do is remove all instances of that class when a user clicks on an image (which does not have the m-active class) and add the m-active class to that image.

For instance in a Backgrid row you might have a click handler as follows:

"click": function () {
    this.$el.addClass('m-active');
}

But you also want to remove that class from any rows to which it was previously added, so that only one row at a time has the .m-active class

Does anyone know how this can be done in javascript/jquery?

Yes, I have tried removeClass but I could not get it to do what I want. — jdc987, Jul 15 '13 at 19:48
possible duplicate of [.removeClass from all elements (versus a single defined element)](http://stackoverflow.com/questions/6899888/removeclass-from-all-elements-versus-a-single-defined-element) — Mottie, Jul 15 '13 at 19:49

jsalonen · Accepted Answer · 2013-07-15T19:52:53.287

62

With jQuery:

$('.m-active').removeClass('m-active');

Explanation:

Calling $('.m-active') selects all elements from the document that contain class m-active
Whatever you chain after this selector gets applied to all selected elements
Chaining the call with removeClass('m-active') removes class m-active from all of the selected elements

For documentation on this specific method, see: http://api.jquery.com/removeClass/

Getting grasp of the whole selector thing with jQuery is challenging at first, but once you get it, you see everything in very different light. I encourage you to take a look into some good jQuery tutorials. I personally recommend checking out Codeacademy's jQuery track: http://www.codecademy.com/tracks/jquery

edited Jul 15 '13 at 19:52

answered Jul 15 '13 at 19:47

jsalonen

29,593
15
91
109

Will this remove all of the instances of m-active that I have throughout my whole HTML file? – jdc987 Jul 15 '13 at 19:48
Yes in fact it does. See the explanation I added! – jsalonen Jul 15 '13 at 19:50
Great. This is just what I needed and couldn't find when searching. Thank you for explaining it as well (I am new to jquery/javascript/programming in general so this helped me)! – jdc987 Jul 15 '13 at 19:53

score 8 · Answer 2 · edited Jun 24 '15 at 20:35

8

all answers point to remove the class from the DOM element. But if you are asking to remove the element itself you can user .remove() jquery method

$('.m-active').remove();

JQuery Remove Docs

edited Jun 24 '15 at 20:35

Coding Enthusiast

3,865
1
27
50

answered Jul 15 '13 at 19:54

Alireza

5,444
9
38
50

score 3 · Answer 3 · answered Nov 14 '21 at 17:38

3

In plain JavaScript (no jquery):

for (elem of document.getElementsByClassName("m-active")) {
    elem.classList.remove("m-active");
}

answered Nov 14 '21 at 17:38

AldaronLau

1,044
11
15

There is an error here. elem needs to be declared with let, var or const. Still +1 because this answer helped – Louise Eggleton Jun 02 '22 at 11:38

HIRA THAKUR · Answer 4 · 2013-07-15T19:56:50.267

0

Jquery-:

$("class").removeClass("your class");

javascript-: Set the class name to nothing when you want to remove class in javascript!!!

document.getElementById("your id").className = "";

or

element.classList.remove("class name");

edited Jul 15 '13 at 19:56

answered Jul 15 '13 at 19:50

HIRA THAKUR

17,189
14
56
87

score 0 · Answer 5 · answered Feb 05 '15 at 15:14

0

Specifically addressing the code block added to strengthen the quality of the question, and borrowing from jsalonen:

"click": function () {
    $('.m-active').removeClass('m-active');
    this.$el.addClass('m-active');
}

answered Feb 05 '15 at 15:14

Dexygen

12,287
13
80
147

How to remove all instances of a class in javascript/jquery?

5 Answers5

Linked

Related