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?

Lend

Yes, I have tried removeClass but I could not get it to do what I want. – Lend

possible duplicate of .removeClass from all elements (versus a single defined element) – Dryfoos

The second part would be $(this).addClass('m-active'); – Reckoning

Answer 1

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

Proustite

Will this remove all of the instances of m-active that I have throughout my whole HTML file? – Lend

Yes in fact it does. See the explanation I added! – Proustite

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)! – Lend

Answer 2

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

Priscella

Answer 3

In plain JavaScript (no jquery):

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

Disrelish

There is an error here. elem needs to be declared with let, var or const. Still +1 because this answer helped – Fortune

Answer 4

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

Spire

Answer 5

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

Geminate