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.

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))
jQuery

Als classname 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>
html

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 btn 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")
jQuery

Durch den Ausdruck removeClass("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

Hier verwenden wir die Funktion jQuery.removeClass(), um alle CSS-Klassen von einem <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.

War dieser Artikel hilfreich?