jQuery wurde ur­sprüng­lich erstellt, um DOM-Ma­ni­pu­la­ti­on zu ver­ein­fa­chen. Durch die Ver­wen­dung von jQuery.re­mo­ve­Class() können Sie mit wenig Aufwand auf Elemente zugreifen und ihre CSS-Klassen entfernen.

Was ist die jQuery.re­mo­ve­Class()-Methode?

Mit jQuery.re­mo­ve­Class() können Sie eine oder mehrere CSS-Klassen von einem aus­ge­wähl­ten Element entfernen, ohne dabei den gesamten Klas­sen­at­tri­but­wert ändern zu müssen. Sie können also gezielt bestimmte Klassen entfernen, um das Styling und Verhalten der Website in­ter­ak­tiv zu steuern. Wenn Sie Klassen hin­zu­fü­gen möchten, sollten Sie jQuery.addClass() verwenden. Sie können auch mithilfe von jQuery.on() Event-Handler für bestimmte Er­eig­nis­se festlegen, die das Entfernen von CSS-Klassen durch jQuery.re­mo­ve­Class() auslösen. Der Einsatz der Methode ist zudem pro­blem­los möglich, wenn Sie jQuery in WordPress verwenden.

Tipp

Webspace von IONOS bietet Ihnen die Mög­lich­keit, wer­be­frei­en Spei­cher­platz für Ihre Web­an­wen­dun­gen zu mieten. Dazu erhalten Sie von IONOS auf Ihre An­for­de­run­gen zu­ge­schnit­te­ne Domains und E-Mail-Adressen.

Wie sehen die Syntax und Parameter von jQuery.re­mo­ve­Class() aus?

Die Methode jQuery.re­mo­ve­Class() 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 aus­ge­wähl­ten Elemente während dem Entfernen der Klasse aus­ge­führt wird. Schließ­lich wird mit den Pa­ra­me­tern index der Index des aktuellen Elements und mit currentclass der aktuelle Wert der CSS-Klasse, die gerade entfernt wird, angegeben.

Wenn Sie mehr zu Se­lek­to­ren und der Syntax von jQuery erfahren möchten, empfehlen wir Ihnen unser jQuery-Tutorial.

Tipp

Op­ti­mie­ren Sie Ihre Ar­beits­pro­zes­se und steigern Sie die Effizienz mit der IONOS Ent­wick­ler API. Für Ihre Hosting-Projekte können Sie einen sicheren Zu­griffs­schlüs­sel erstellen und damit Ihre Res­sour­cen au­to­ma­tisch verwalten.

Beispiele für die Anwendung von jQuery.re­mo­ve­Class()

Im Folgenden stellen wir Ihnen drei ver­schie­de­ne Ein­satz­mög­lich­kei­ten der jQuery.re­mo­ve­Class()-Methode vor:

jQuery.re­mo­ve­Class() 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.re­mo­ve­Class() ohne Argumente aufrufen, können Sie alle Klassen des je­wei­li­gen Elements entfernen. In diesem Beispiel haben wir re­mo­ve­Class() 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 Zei­chen­ket­te mit Leer­zei­chen 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.re­mo­ve­Class(), 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 Klas­sen­at­tri­but­wert des Elements zurück. Dadurch werden alle vor­han­de­nen CSS-Klassen vom <div>-Element entfernt.

Tipp

Mit Deploy Now von IONOS können Sie Web­an­wen­dun­gen direkt über GitHub deployen. In nur wenigen Schritten wird Ihr Projekt au­to­ma­tisch be­reit­ge­stellt. Der Actions-Workflow ist dabei jederzeit anpassbar. Mit der Vorschau-URL für au­to­ma­ti­sches Staging erhalten Sie schnelles Live-Feedback.

Zum Hauptmenü