Entfernen Sie alle Klassen mit jQuery
-
Verwenden Sie die Methode
.removeClass(), um Klassen in jQuery zu entfernen -
Verwenden Sie die Methode
.removeAttr(), um Klassen in jQuery zu entfernen -
Verwenden Sie die Methode
.attr(), um Klassen in jQuery zu entfernen -
Verwenden Sie die JavaScript-Eigenschaft
className, um Klassen in jQuery zu entfernen
Um alle Klassen mit jQuery zu entfernen, können Sie drei jQuery-Methoden und eine JavaScript-Eigenschaft verwenden. Die jQuery-Methoden sind .removeClass(), .removeAttr() und .attr(), während die JavaScript-Eigenschaft die Eigenschaft className ist.
In diesem Artikel erfahren Sie anhand praktischer Codebeispiele, wie Sie sie alle verwenden.
Verwenden Sie die Methode .removeClass(), um Klassen in jQuery zu entfernen
Mit der Methode .removeClass() können Sie mit jQuery eine CSS-Klasse aus einem Element entfernen. Wenn Sie ihm jedoch keinen bestimmten Klassennamen übergeben, werden alle CSS-Klassen aus diesem Element entfernt.
Darum geht es im folgenden Beispiel; Sie entfernen die CSS-Klassen aus dem Absatz, wenn Sie auf die Schaltfläche klicken.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>01-jQuery-remove-all-classes</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
#btn_remove_all_classes {
padding: 1.2em;
background-color: #1a1a1a;
color: #ffffff;
cursor: pointer;
border-radius: 20px;
}
/* CSS styles for the paragraph that'll be
* removed using jQuery.
*/
.underline {
text-decoration: underline;
text-underline-position: under;
}
.bold {
font-weight: bold;
}
.font-size-3em {
font-size: 3em;
}
</style>
</head>
<body>
<main>
<button id="btn_remove_all_classes">Remove all classes from paragraph</button>
<p class="underline bold font-size-3em">
This paragraph has three CSS styles. Click the button above to remove them!
</p>
</main>
<script>
$(document).ready(function() {
$("#btn_remove_all_classes").click(function() {
// Delete the CSS classes using the removeClass method
// in jQuery.
$("main p").removeClass();
// EXTRA: Remove the click event.
$("#btn_remove_all_classes").off('click');
});
});
</script>
</body>
</html>
Ausgang:
Verwenden Sie die Methode .removeAttr(), um Klassen in jQuery zu entfernen
Die Methode .removeAttr() ist spezifisch darin, was sie aus einem Element entfernt. Hier können Sie das Attribut class aus dem Element übergeben, und alle Klassen werden gelöscht.
Im Folgenden haben wir den jQuery-Code aktualisiert, um mithilfe von .removeAttr() vier CSS-Klassen aus dem Absatz zu entfernen. Sie können auf die neu gestaltete Schaltfläche klicken und die Ergebnisse in Ihrem Webbrowser anzeigen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>02-jQuery-remove-all-classes</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
#btn_remove_all_classes {
padding: 1.2em;
background-color: #ff6347;
color: #ffffff;
cursor: pointer;
border-radius: 20px;
}
/* CSS styles for the paragraph that'll be
* removed using jQuery.
*/
.italic {
font-style: italic;
}
.color-blue {
color: #1560bd;
}
.trebuchet-ms-font {
font-family: "Trebuchet MS";
}
.font-size-3em {
font-size: 3em;
}
</style>
</head>
<body>
<main>
<button id="btn_remove_all_classes">Remove all classes from paragraph</button>
<p class="italic color-blue trebuchet-ms-font font-size-3em">
Styled with CSS classes. Don't want them? Click the button above!
</p>
</main>
<script>
$(document).ready(function() {
$("#btn_remove_all_classes").click(function() {
// Delete the CSS classes using the removeAttr
// method in jQuery.
$("main p").removeAttr('class');
// EXTRA: Remove the click event.
$("#btn_remove_all_classes").off('click');
});
});
</script>
</body>
</html>
Ausgang:
Verwenden Sie die Methode .attr(), um Klassen in jQuery zu entfernen
Die Methode .attr() funktioniert wie die Methode .removeAttr(), um CSS-Klassen aus einem Element zu entfernen. Aber dieses Mal verwenden Sie .attr(), um die Eigenschaft class auf einen leeren String zu setzen.
Das Ergebnis ist das Entfernen aller Klassen aus dem übereinstimmenden Element. Das Folgende zeigt Ihnen, wie es geht; Was folgt, ist das Ergebnis in Firefox 106.0.1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>03-jQuery-remove-all-classes</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
#btn_remove_all_classes {
padding: 1.2em;
background-color: #c069ff;
color: #ffffff;
cursor: pointer;
border-radius: 20px;
}
/* CSS styles for the paragraph that'll be
* removed using jQuery.
*/
.font-style-italic {
font-style: italic;
}
.writing-mode-vertical-lr {
writing-mode: vertical-lr;
}
.font-size-2em {
font-size: 2em;
}
</style>
</head>
<body>
<main>
<button id="btn_remove_all_classes">Remove all classes from paragraph</button>
<p class="font-style-italic writing-mode-vertical-lr font-size-2em">
Weird horizontal text. Click the button to reset it to normal view!
</p>
</main>
<script>
$(document).ready(function() {
$("#btn_remove_all_classes").click(function() {
// Delete the CSS classes using the attr
// method in jQuery.
$("main p").attr('class', '');
// EXTRA: Remove the click event.
$("#btn_remove_all_classes").off('click');
});
});
</script>
</body>
</html>
Ausgang:
Verwenden Sie die JavaScript-Eigenschaft className, um Klassen in jQuery zu entfernen
Sie können die JavaScript-Eigenschaft className auf einen leeren String setzen, um CSS-Klassen aus einem Element zu löschen. Ja, dies ist eine JavaScript-Eigenschaft, aber Sie verwenden jQuery, um das Element auszuwählen.
Im Folgenden finden Sie den aktualisierten jQuery-Code, der die Eigenschaft className zum Entfernen verwendet. Außerdem enthält der Absatz jetzt fünf Klassen, die Sie entfernen werden.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>04-jQuery-remove-all-classes</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
#btn_remove_all_classes {
padding: 1.2em;
background-color: #1560bd;
color: #ffffff;
cursor: pointer;
border-radius: 20px;
}
/* CSS styles for the paragraph that'll be
* removed using jQuery.
*/
.background-yellow {
background-color: #fed000;
}
.color-white {
color: #ffffff;
}
.text-align-center {
text-align: center;
}
.line-height-1618 {
line-height: 1.618
}
.font-size-2em {
font-size: 1.5em;
}
</style>
</head>
<body>
<main>
<button id="btn_remove_all_classes">Remove all classes from paragraph</button>
<p class="background-yellow color-white text-align-center line-height-1618 font-size-2em">
Just some random text with CSS styling.
</p>
</main>
<script>
$(document).ready(function() {
$("#btn_remove_all_classes").click(function() {
// Delete the CSS classes using JavaScript className
// property.
$("main p")[0].className = '';
// EXTRA: Remove the click event.
$("#btn_remove_all_classes").off('click');
});
});
</script>
</body>
</html>
Ausgang:
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn