Comment supprimer toutes les classes CSS en utilisant jQuery / JavaScript?

778

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

JQuery et JavaScript brut fonctionneront.

Cliquez Upvote
la source

Réponses:

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

L'appel removeClasssans paramètres supprimera toutes les classes de l'élément.


Vous pouvez également utiliser (mais ce n'est pas nécessairement recommandé, la bonne façon est celle ci-dessus):

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

Si vous n'aviez pas jQuery, ce serait à peu près votre seule option:

document.getElementById('item').className = '';
jimyi
la source
7
La attr()version ne devrait-elle pas être prop()maintenant?
Mike
7
L'appel de removeClass () sans paramètres ne semble plus fonctionner dans la version 1.11.1
Vincent
1
@Vincent Semble être un bogue introduit dans jQuery puisque leur documentation l'indique explicitement: If a class name is included as a parameter, then only that class will be removed from the set of matched elements. If no class names are specified in the parameter, all classes will be removed. api.jquery.com/removeclass
AtheistP3ace
Oui, je soupçonne également que c'est un bug, et pas par conception. En attendant, le code JavaScript pur suivant fonctionne très bien. document.getElementById ("item"). removeAttribute ("class");
Vincent
1
Il y a un problème avec jQuery UI 1.9. Si removeClass () ne fonctionnait pas, utilisez removeAttr ('class')
Milad
119

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

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

le fera tout seul ...

da5id
la source
3
ouais: "Supprime toutes ou les classes spécifiées de l'ensemble des éléments correspondants."
da5id
5
Maintenant, il est correctement documenté : si aucun nom de classe n'est spécifié dans le paramètre, toutes les classes seront supprimées.
utilisateur
17

Définissez simplement l' classNameattribut de l'élément DOM réel sur ''(rien).

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

Edit: D'autres personnes ont dit que le simple fait d'appeler removeClassfonctionne - j'ai testé cela avec Google JQuery Playground: http://savedbythegoog.appspot.com/?id=ag5zYXZlZGJ5dGhlZ29vZ3ISCxIJU2F2ZWRDb2RlGIS61gEM ... et cela fonctionne. Vous pouvez donc également le faire de cette façon:

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

Bien sûr.

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

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"

Shawn Rebelo
la source
9

La méthode la plus courte

$('#item').removeAttr('class').attr('class', '');
Yanni
la source
5

Vous pouvez simplement 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 de la classe dans un constructeur html. Bonne chance.

Alessandro Foolish Ciak DAnton
la source
4
$('#elm').removeAttr('class');

plus d'attractivité de classe ne sera présente dans "orme".

uihelp
la source
C'est ce qui a fonctionné pour moi. removeClass();N'a pas travaillé pour moi.
kneidels
3

J'aime utiliser des js natifs pour cela, croyez-le ou non!

1.

// remove all items all class  
const items = document.querySelectorAll('item');
for (let i = 0; i < items.length; i++) {
    items[i].className = '';
}

2.

// only remove all class of first item
const item1 = document.querySelector('item');
item1.className = '';

jQuery façons

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

  2. $("#item").removeClass("class1 ... classn");

xgqfrms
la source
2

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

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

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

essayer 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>

x-rw
la source
1

Utilisons cet exemple. Vous souhaitez peut-être que l'utilisateur de votre site Web sache qu'un champ est valide ou qu'il a besoin d'attention en modifiant la couleur d'arrière-plan du champ. Si l'utilisateur frappe réinitialiser, votre code ne doit réinitialiser que les champs contenant des données et ne pas prendre la peine de parcourir tous les autres champs de votre page.

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

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

J'ai eu un problème similaire. Dans mon cas, sur les éléments désactivés, la classe aspNetDisabled et tous les contrôles désactivés avaient des couleurs incorrectes. Donc, j'ai utilisé jquery pour supprimer cette classe sur chaque élément / contrôle que je ne connais pas et tout fonctionne et a fière allure maintenant.

Voici mon code pour supprimer la classe aspNetDisabled:

$(document).ready(function () {

    $("span").removeClass("aspNetDisabled");
    $("select").removeClass("aspNetDisabled");
    $("input").removeClass("aspNetDisabled");

}); 
Nezir
la source