web-dev-qa-db-fra.com

Comment supprimer toutes les classes CSS à l'aide de jQuery?

Au lieu d'appeler individuellement $("#item").removeClass() pour chaque classe qu'un élément peut avoir, existe-t-il une seule fonction pouvant être appelée permettant de supprimer toutes les classes CSS de l'élément donné? 

JQuery et JavaScript brut fonctionneront.

javascriptjquerydom
714
Click Upvote
$("#item").removeClass();

L'appel de removeClass sans paramètre supprimera toutes les classes de l'élément.

Vous pouvez également utiliser (mais ce n’est pas nécessairement recommandé, la méthode correct est celle indiquée ci-dessus):

$("#item").removeAttr('class');
$("#item").attr('class', '');
$('#item')[0].className = '';

Si vous n'aviez pas jQuery, ce serait pratiquement votre seule option:

document.getElementById('item').className = '';
1396
jimyi

Attendez, removeClass () ne supprime-t-il pas par défaut toutes les classes si rien de spécifique n'est spécifié? Alors

$("#item").removeClass();

le fera tout seul ...

110
da5id

Bien sûr.

$('#item')[0].className = '';
// or
document.getElementById('item').className = '';
13
kangax

Il suffit de définir l'attribut className de l'élément DOM réel sur '' (rien).

$('#item')[0].className = ''; // the real DOM element is at [0]

Modifier: D'autres personnes ont déjà déclaré que le simple fait d'appeler removeClass fonctionnait - j'ai testé cela avec Google JQuery Playground: http://savedbythegoog.appspot.com/?id=ag5zYXZlZGJ5dGhlZ29vZ3ISCxIJU2F2ZWRDb2RlGIS61gEM ... et ça marche. Donc, vous pouvez aussi le faire de cette façon:

$("#item").removeClass();
13
Isaac Waller

La méthode la plus courte

$('#item').removeAttr('class').attr('class', '');
9
Yanni

Heh, est venu chercher une réponse similaire. Puis ça m'a frappé.

Supprimer des classes spécifiques

$('.class').removeClass('class');

Dire si l'élément a class = "class another-class"

8
Shawn Rebelo
$('#Elm').removeAttr('class');

la classe d'attr ne sera plus présente dans "Elm".

4
uihelp

Vous pouvez juste essayer

$(document).ready(function() {
   $('body').find('#item').removeClass();
});

Si vous devez accéder à cet élément sans nom de classe, par exemple, vous devez ajouter un nouveau nom de classe, vous pouvez le faire:

$(document).ready(function() {
   $('body').find('#item').removeClass().addClass('class-name');
});

J'utilise cette fonction dans mon projet pour supprimer et ajouter une classe dans un générateur HTML. Bonne chance.

3
Alessandro Foolish Ciak DAnton

Etant donné que toutes les versions de jQuery ne sont pas égales, vous pouvez rencontrer le même problème que moi, à savoir appeler $ ("# item"). RemoveClass (); ne supprime pas réellement la classe. (Probablement un bug)

Une méthode plus fiable consiste simplement à utiliser du code JavaScript brut et à supprimer complètement l'attribut de classe.

document.getElementById("item").removeAttribute("class");
1
Vincent

essayez avec removeClass

Par exemple :

var nameClass=document.getElementsByClassName("clase1");
console.log("after", nameClass[0]);
$(".clase1").removeClass();
var nameClass=document.getElementsByClassName("clase1");
console.log("before", nameClass[0]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clase1">I am Div with class="clase1"</div>

1
x-rw

Utilisons cet exemple. Vous voulez peut-être que l'utilisateur de votre site Web sache qu'un champ est valide ou qu'il nécessite une attention particulière en modifiant la couleur d'arrière-plan du champ. Si l'utilisateur clique sur réinitialiser, votre code ne doit réinitialiser que les champs contenant des données et éviter de parcourir en boucle tous les autres champs de votre page. 

Ce filtre jQuery supprimera la classe "highlightCriteria" uniquement pour l'entrée ou sélectionnez les champs qui ont cette classe.

$form.find('input,select').filter(function () {
    if((!!this.value) && (!!this.name)) {
        $("#"+this.id).removeClass("highlightCriteria");
    }
});
0
Greg Bologna