web-dev-qa-db-fra.com

Comment supprimer toutes les instances d'une classe en javascript/jquery?

J'ai cette classe appelée .m-active qui est utilisée plusieurs fois dans mon code HTML.

Fondamentalement, ce que je veux faire est de supprimer toutes les instances de cette classe lorsqu'un utilisateur clique sur une image (qui n'a pas la classe m-active) et d'ajouter la classe m-active à cette image.

Par exemple, dans une ligne Backgrid, vous pouvez avoir un gestionnaire de clics comme suit:

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

Mais vous souhaitez également supprimer cette classe de toutes les lignes auxquelles elle a été précédemment ajoutée, afin que seule une ligne à la fois ait la classe .m-active.

Est-ce que quelqu'un sait comment cela peut être fait en javascript/jquery?

23
jdc987

Avec jQuery:

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

Explication:

  • L'appel de $('.m-active') sélectionne tous les éléments du document contenant la classe m-active
  • Tout ce que vous chaînez après ce sélecteur est appliqué à tous les éléments sélectionnés
  • Le chaînage de l'appel avec removeClass('m-active') supprime la classe m-active de tous les éléments sélectionnés

Pour obtenir de la documentation sur cette méthode spécifique, voir: http://api.jquery.com/removeClass/

Comprendre tout le processus de sélection avec jQuery est difficile au début, mais une fois que vous l’avez compris, vous voyez tout sous un jour très différent. Je vous encourage à jeter un oeil à quelques bons tutoriels jQuery. Je recommande personnellement de vérifier la piste jQuery de Codeacademy: http://www.codecademy.com/tracks/jquery

46
jsalonen

toutes les réponses pointent pour supprimer la classe de l'élément DOM. Mais si vous demandez de supprimer l'élément lui-même, vous pouvez utiliser la méthode .remove() jquery.

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

JQuery Remove Docs

7
Alireza

Jquery-:

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

javascript-: Définissez le nom de la classe sur rien lorsque vous souhaitez supprimer la classe en javascript !!!

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

ou

element.classList.remove("class name");
1
HIRA THAKUR

Abordant spécifiquement le bloc de code ajouté pour renforcer la qualité de la question et empruntant à jsalonen:

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