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.
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))
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.
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>
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")
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");
});
});
});
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.
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.
Ähnliche Artikel
whiteMoccaShutterstock jQuery.animate(): So entwerfen Sie Animationen für Ihre Website
Die jQuery.animate()-Methode vereinfacht die Animationserstellung für interaktive Benutzererlebnisse auf Webseiten. Sie bietet verschiedene vorgefertigte Effekte wie das Ein- und Ausblenden von Elementen, das Schwenken oder das Skalieren. Diese Aktionen können einfach angewendet werden, ohne dass umfangreicher eigener Code erforderlich ist. Wir erläutern Ihnen die Syntax und Verwendung der…
jQuery AJAX – so funktioniert asynchrone Datenübertragung
jQuery AJAX-Methoden dienen dem asynchronen Datenaustausch zwischen einer Webseite und einem Server, ohne die Seite neu zu laden. Ihre Vorteile liegen u. a. in der verbesserten Nutzungserfahrung und der einfacheren Integration von Daten im JSON- oder XML-Format. Diese leistungsstarken Funktionen ermöglichen, interaktive und ansprechende Webanwendungen zu erstellen.
BEST-BACKGROUNDSShutterstock jQuery.addClass() – gezielte Klassenmanipulation für Webseiteneffekte
Die Funktion jQuery.addClass() kann dynamisch Klassen zu HTML-Elementen hinzufügen. Die Methode beeinflusst dadurch die Gestaltung oder das Verhalten Ihrer Webseite. In diesem Artikel stellen wir Ihnen die Syntax und den Anwendungsbereich von jQuery.addClass() vor, damit Sie beeindruckende Effekte auf Ihrer Website erzielen können.
