Wie entferne ich alle CSS-Klassen mit jQuery / JavaScript?

778

Gibt $("#item").removeClass()es eine einzelne Funktion, die aufgerufen werden kann, um alle CSS-Klassen aus dem angegebenen Element zu entfernen, anstatt jede einzelne Klasse, die ein Element haben könnte, einzeln aufzurufen ?

Sowohl jQuery als auch Raw-JavaScript funktionieren.

Klicken Sie auf Upvote
quelle

Antworten:

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

Wenn Sie removeClassohne Parameter aufrufen, werden alle Klassen des Elements entfernt.


Sie können auch verwenden (wird aber nicht unbedingt empfohlen, der richtige Weg ist der oben beschriebene):

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

Wenn Sie jQuery nicht hätten, wäre dies so ziemlich Ihre einzige Option:

document.getElementById('item').className = '';
Jimyi
quelle
7
Sollte die attr()Version nicht prop()jetzt sein?
Mike
7
Das Aufrufen von removeClass () ohne Parameter scheint in Version 1.11.1
Vincent
1
@ Vincent scheint ein Fehler zu sein, der in jQuery eingeführt wurde, da in der Dokumentation ausdrücklich 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. Folgendes
angegeben ist
Ja, ich vermute auch, dass es ein Fehler ist und nicht beabsichtigt. In der Zwischenzeit funktioniert das folgende reine JavaScript einwandfrei. document.getElementById ("item"). removeAttribute ("class");
Vincent
1
Es gibt ein Problem mit jQuery UI 1.9. Wenn removeClass () nicht funktioniert hat, verwenden Sie removeAttr ('class')
Milad
119

Moment mal, entfernt removeClass () nicht standardmäßig alle Klassen, wenn nichts Spezielles angegeben ist? Damit

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

werde es alleine machen ...

da5id
quelle
3
yeah: "Entfernt alle oder die angegebenen Klassen aus der Menge der übereinstimmenden Elemente."
da5id
5
Jetzt ist es richtig dokumentiert : Wenn im Parameter keine Klassennamen angegeben sind, werden alle Klassen entfernt.
Benutzer
17

Setzen Sie einfach das classNameAttribut des realen DOM-Elements auf ''(nichts).

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

Bearbeiten: Andere Leute haben gesagt, dass nur das Aufrufen removeClassfunktioniert - ich habe dies mit dem Google JQuery-Spielplatz getestet: http://savedbythegoog.appspot.com/?id=ag5zYXZlZGJ5dGhlZ29vZ3ISCxIJU2F2ZWRDb2RlGIS61gEM ... und es funktioniert. Sie können es also auch so machen:

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

Na sicher.

$('#item')[0].className = '';
// or
document.getElementById('item').className = '';
Kangax
quelle
11

Heh, kam auf der Suche nach einer ähnlichen Antwort. Dann traf es mich.

Bestimmte Klassen entfernen

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

Sagen Sie, wenn das Element class = "class another-class" hat.

Shawn Rebelo
quelle
9

Die kürzeste Methode

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

Sie können es einfach versuchen

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

Wenn Sie ohne Klassennamen auf dieses Element zugreifen müssen, z. B. einen neuen Klassennamen hinzufügen müssen, können Sie Folgendes tun:

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

Ich verwende diese Funktion in meinem Projekt, um Klassen in einem HTML-Builder zu entfernen und hinzuzufügen. Viel Glück.

Alessandro Dummer Ciak DAnton
quelle
4
$('#elm').removeAttr('class');

In "Ulme" wird kein Klassenattr mehr vorhanden sein.

uihelp
quelle
Das hat bei mir funktioniert. removeClass();hat bei mir nicht funktioniert.
Kniejungen
3

Ich benutze gerne native js, mache das, ob du es glaubst oder nicht!

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-Möglichkeiten

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

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

xgqfrms
quelle
2

Da nicht alle Versionen von jQuery gleich sind, kann es sein, dass Sie auf dasselbe Problem stoßen, das ich ausgeführt habe. Dies bedeutet, dass Sie $ ("# item") aufrufen. RemoveClass (); entfernt die Klasse nicht wirklich. (Wahrscheinlich ein Fehler)

Eine zuverlässigere Methode besteht darin, einfach rohes JavaScript zu verwenden und das Klassenattribut vollständig zu entfernen.

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

Versuche es mit removeClass

Zum Beispiel :

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
quelle
1

Verwenden wir dieses Beispiel. Vielleicht möchten Sie, dass der Benutzer Ihrer Website weiß, dass ein Feld gültig ist, oder dass er durch Ändern der Hintergrundfarbe des Felds beachtet werden muss. Wenn der Benutzer auf Zurücksetzen klickt, sollte Ihr Code nur die Felder mit Daten zurücksetzen und sich nicht die Mühe machen, jedes andere Feld auf Ihrer Seite zu durchlaufen.

Dieser jQuery-Filter entfernt die Klasse "HighlightCriteria" nur für die Eingabe- oder Auswahlfelder mit dieser Klasse.

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

Ich hatte ein ähnliches Problem. In meinem Fall wurde auf deaktivierte Elemente angewendet, dass die Klasse aspNetDisabled und alle deaktivierten Steuerelemente falsche Farben hatten. Also habe ich jquery verwendet, um diese Klasse für jedes Element / Steuerelement zu entfernen, das ich nicht möchte, und alles funktioniert und sieht jetzt großartig aus.

Dies ist mein Code zum Entfernen der aspNetDisabled-Klasse:

$(document).ready(function () {

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

}); 
Nezir
quelle