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?
Avec jQuery:
$('.m-active').removeClass('m-active');
Explication:
$('.m-active')
sélectionne tous les éléments du document contenant la classe m-active
removeClass('m-active')
supprime la classe m-active
de tous les éléments sélectionnésPour 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
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-:
$("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");
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');
}