jQuery Klasse entfernen
Die Methode removeclass() in jQuery entfernt einzelne oder mehrere Klassennamen. Dieses Tutorial demonstriert die Verwendung der Methode removeclass() in jQuery.
jQuery Klasse entfernen
Die Methode removeclass() entfernt eine einzelne Klasse oder mehrere Klassen aus jedem HTML-Element aus einer Gruppe von Elementen oder einer Menge von übereinstimmenden Elementen. Die Methode kann je nach Anzahl der Klassen auf verschiedene Weise verwendet werden.
Siehe Syntax unten.
// Method 1:
removeClass(ClassName)
// Method 2:
removeClass(ClassNames)
// Method 3:
removeClass(function)
Function(Integer index, String className) => String
// Method 4:
removeClass(function)
Function(Integer index, String className) => String | Array
- Methode 1 entfernt eine oder mehrere durch Leerzeichen getrennte Klassen mit dem Klassenattribut jedes übereinstimmenden Elements. Der Parameter
ClassNameist für diese Methode ein String. - Methode 2 entfernt mehrere Klassen aus einem Satz übereinstimmender Elemente. Der Parameter
ClassNamesist ein Array für diese Methode. - Methode 3 entfernt eine oder mehrere durch Leerzeichen getrennte Klassen, die von der Funktion zurückgegeben werden. Diese Methode erhält den Index eines Elements in der Menge, und der alte Klassenwert wird als Argument verwendet.
- Methode 4 entfernt eine oder mehrere durch Leerzeichen getrennte Klassen, die von der Funktion zurückgegeben werden; Der
classNamekann die Zeichenfolge oder ein Array von Klassen sein. Diese Methode erhält auch den Index eines Elements in der Menge, und der alte Klassenwert wird als Argument verwendet.
Lassen Sie uns Beispiele für die Methode removeClass() ausprobieren.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery removeClass</title>
<style>
p {
font-weight: bolder;
}
.FontSize {
font-size: 25px;
}
.UnderLine {
text-decoration: underline;
}
.Highlight {
background: lightgreen;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<p class="FontSize UnderLine">Hello</p>
<p class="FontSize UnderLine Highlight">This</p>
<p class="FontSize UnderLine Highlight">is</p>
<p class="FontSize UnderLine">Delftstack</p>
<p class="FontSize UnderLine">Site</p>
<script>
$( "p" ).even().removeClass( "FontSize" );
</script>
</body>
</html>
Der obige Code enthält mehrere Absätze mit mehr als einer durch Leerzeichen getrennten Klasse, einschließlich FontSize, UnderLine und Highlight. Der Code entfernt die Klasse FontSize aus den geraden Absätzen.
Siehe Ausgabe:
Um mehr als eine durch Leerzeichen getrennte Klasse zu entfernen, sehen Sie sich das Beispiel unten an.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery removeClass</title>
<style>
p {
font-weight: bolder;
}
.FontSize {
font-size: 25px;
}
.UnderLine {
text-decoration: underline;
}
.Highlight {
background: lightgreen;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<p class="FontSize UnderLine">Hello</p>
<p class="FontSize UnderLine Highlight">This</p>
<p class="FontSize UnderLine Highlight">is</p>
<p class="FontSize UnderLine">Delftstack</p>
<p class="FontSize UnderLine">Site</p>
<script>
$( "p" ).even().removeClass( "FontSize UnderLine Highlight" );
</script>
</body>
</html>
Ebenso können wir mehrere Klassen entfernen, indem wir in der Methode removeClass durch Leerzeichen getrennte Klassennamen angeben. Siehe Ausgabe:
Der obige Code entfernte die Klassen FontSize, UnderLine und Highlight aus den geraden Absätzen.
Versuchen wir nun, mehrere Klassen mithilfe eines Arrays zu entfernen. Siehe Beispiel:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery removeClass</title>
<style>
p {
font-weight: bolder;
}
.FontSize {
font-size: 25px;
}
.UnderLine {
text-decoration: underline;
}
.Highlight {
background: lightgreen;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<p class="FontSize UnderLine">Hello</p>
<p class="FontSize UnderLine Highlight">This</p>
<p class="FontSize UnderLine Highlight">is</p>
<p class="FontSize UnderLine">Delftstack</p>
<p class="FontSize UnderLine">Site</p>
<script>
$( "p" ).even().removeClass( ["FontSize", "UnderLine", "Highlight"] );
</script>
</body>
</html>
Der obige Code hat dieselbe Ausgabe wie das zweite Beispiel, da in diesem Beispiel dieselben mehreren Klassen in einem Array an die Methode removeclass übergeben werden. Siehe Ausgabe:
Die Klasse removeClass ohne Parameter entfernt alle Klassen aus dem angegebenen Element. Siehe Beispiel:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery removeClass</title>
<style>
p {
font-weight: bolder;
}
.FontSize {
font-size: 25px;
}
.UnderLine {
text-decoration: underline;
}
.Highlight {
background: lightgreen;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<p class="FontSize UnderLine">Hello</p>
<p class="FontSize UnderLine Highlight">This</p>
<p class="FontSize UnderLine Highlight">is</p>
<p class="FontSize UnderLine">Delftstack</p>
<p class="FontSize UnderLine">Site</p>
<script>
$( "p" ).odd().removeClass( );
</script>
</body>
</html>
Der obige Code entfernt alle Klassen aus ungeraden Absätzen. Siehe Ausgabe:
Abschließend das Beispiel removeClass mit function als Parameter. Siehe Beispiel:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery removeClass</title>
<style>
p {
font-weight: bolder;
}
.FontSize {
font-size: 25px;
}
.UnderLine {
text-decoration: underline;
}
.Highlight {
background: lightgreen;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<p class="FontSize UnderLine">Hello</p>
<p class="FontSize UnderLine Highlight">This</p>
<p class="FontSize UnderLine Highlight">is</p>
<p class="FontSize UnderLine">Delftstack</p>
<p class="FontSize UnderLine">Site</p>
<script>
$( "p" ).odd().removeClass(function(){
return $(this).attr( "class" );
});
</script>
</body>
</html>
Der obige Code entfernt alle Klassen aus ungeraden Absätzen. Siehe Ausgabe:
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook