jQuery.removeClass() – Klassen von HTML-Elementen entfernen
jQuery wurde ursprünglich erstellt, um DOM-Manipulation zu vereinfachen. Durch die Verwendung von jQuery.removeClass() können Sie mit wenig Aufwand auf Elemente zugreifen und ihre CSS-Klassen entfernen.
Als
Wenn Sie mehr zu Selektoren und der Syntax von jQuery erfahren möchten, empfehlen wir Ihnen unser jQuery-Tutorial.
Wenn Sie jQuery.removeClass() ohne Argumente aufrufen, können Sie alle Klassen des jeweiligen Elements entfernen. In diesem Beispiel haben wir removeClass() mit der Funktion jQuery.click() verbunden. Beim Klicken des Buttons mit der ID
Durch den Ausdruck
Hier verwenden wir die Funktion jQuery.removeClass(), um alle CSS-Klassen von einem
War dieser Artikel hilfreich?
Was ist die jQuery.removeClass()-Methode?
Mit jQuery.removeClass() können Sie eine oder mehrere CSS-Klassen von einem ausgewählten Element entfernen, ohne dabei den gesamten Klassenattributwert ändern zu müssen. Sie können also gezielt bestimmte Klassen entfernen, um das Styling und Verhalten der Website interaktiv zu steuern. Wenn Sie Klassen hinzufügen möchten, sollten Sie jQuery.addClass() verwenden. Sie können auch mithilfe von jQuery.on() Event-Handler für bestimmte Ereignisse festlegen, die das Entfernen von CSS-Klassen durch jQuery.removeClass() auslösen. Der Einsatz der Methode ist zudem problemlos möglich, wenn Sie jQuery in WordPress verwenden. Tipp
Webspace von IONOS bietet Ihnen die Möglichkeit, werbefreien Speicherplatz für Ihre Webanwendungen zu mieten. Dazu erhalten Sie von IONOS auf Ihre Anforderungen zugeschnittene Domains und E-Mail-Adressen.
Wie sehen die Syntax und Parameter von jQuery.removeClass() aus?
Die Methode jQuery.removeClass() ist wie folgt aufgebaut:$(selector).removeClass(classname, function(index, currentclass))
jQueryclassname
wird der Name der Klasse oder Klassen angegeben, die entfernt werden soll(en). function(index, currentclass)
ist die Funktion, die für jedes der ausgewählten Elemente während dem Entfernen der Klasse ausgeführt wird. Schließlich wird mit den Parametern index
der Index des aktuellen Elements und mit currentclass
der aktuelle Wert der CSS-Klasse, die gerade entfernt wird, angegeben.Wenn Sie mehr zu Selektoren und der Syntax von jQuery erfahren möchten, empfehlen wir Ihnen unser jQuery-Tutorial.
Tipp
Optimieren Sie Ihre Arbeitsprozesse und steigern Sie die Effizienz mit der IONOS Entwickler API. Für Ihre Hosting-Projekte können Sie einen sicheren Zugriffsschlüssel erstellen und damit Ihre Ressourcen automatisch verwalten.
Beispiele für die Anwendung von jQuery.removeClass()
Im Folgenden stellen wir Ihnen drei verschiedene Einsatzmöglichkeiten der jQuery.removeClass()-Methode vor:jQuery.removeClass() ohne Parameter
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("p").removeClass();
});
});
</script>
</head>
<body>
<p class="big-font blue">Example text</p>
<button id="btn">Click to remove classes</button>
</body>
</html>
htmlbtn
werden die beiden Klassen big-font
und blue
vom <p>
-Element entfernt.Bestimmte Klassen entfernen
Wenn Sie eine spezielle Liste an Klassen entfernen möchten, geben Sie sie einfach als Zeichenkette mit Leerzeichen getrennt an:$("h1").removeClass("highlight uppercase bold")
jQueryremoveClass("highlight uppercase bold")
entfernen wir die drei Klassen highlight
, uppercase
und bold
vom <h1>
-Element.Eine Funktion als Argument übergeben
$(document).ready(function() {
$("#btn").click(function() {
$("div#container").removeClass(function() {
return $(this).attr("class");
});
});
});
jQuery<div>
-Element mit der ID container
zu entfernen, sobald der Button mit der ID btn
geklickt wird. Die Funktion .attr("class")
, die wir an removeClass()
übergeben, gibt den aktuellen Klassenattributwert des Elements zurück. Dadurch werden alle vorhandenen CSS-Klassen vom <div>
-Element entfernt. Tipp
Mit Deploy Now von IONOS können Sie Webanwendungen direkt über GitHub deployen. In nur wenigen Schritten wird Ihr Projekt automatisch bereitgestellt. Der Actions-Workflow ist dabei jederzeit anpassbar. Mit der Vorschau-URL für automatisches Staging erhalten Sie schnelles Live-Feedback.