jQuery ですべてのクラスを削除する
Habdul Hazeez
2024年2月15日
-
.removeClass()メソッドを使用して jQuery でクラスを削除する -
.removeAttr()メソッドを使用して jQuery でクラスを削除する -
.attr()メソッドを使用して jQuery でクラスを削除する -
JavaScript
classNameプロパティを使用して jQuery でクラスを削除する
jQuery ですべてのクラスを削除するには、3つの jQuery メソッドと 1つの JavaScript プロパティを使用できます。 jQuery メソッドは .removeClass()、.removeAttr()、および .attr() であり、JavaScript プロパティは className プロパティです。
この記事では、実用的なコード例を使用してそれらすべてを使用する方法を説明します。
.removeClass() メソッドを使用して jQuery でクラスを削除する
.removeClass() メソッドを使用すると、jQuery を使用して要素から CSS クラスを削除できます。 ただし、特定のクラス名を渡さないと、その要素からすべての CSS クラスが削除されます。
それが次の例です。 ボタンを押すと、段落から CSS クラスが削除されます。
<!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>
出力：
.removeAttr() メソッドを使用して jQuery でクラスを削除する
.removeAttr() メソッドは、要素から何を削除するかに固有のものです。 ここで、要素から class 属性を渡すと、すべてのクラスが削除されます。
以下では、.removeAttr() を使用して段落から 4つの CSS クラスを削除するように jQuery コードを更新しました。 新しいスタイルのボタンをクリックすると、Web ブラウザーで結果を確認できます。
<!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>
出力：
.attr() メソッドを使用して jQuery でクラスを削除する
.attr() メソッドは .removeAttr() メソッドのように機能し、要素から CSS クラスを削除します。 しかし今回は、.attr() を使用して class プロパティを空の文字列に設定します。
その結果、一致した要素からすべてのクラスが削除されます。 以下にその方法を示します。 以下は 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>
出力：
JavaScript className プロパティを使用して jQuery でクラスを削除する
JavaScript の className プロパティを空の文字列に設定して、要素から CSS クラスを削除できます。 はい、これは JavaScript プロパティですが、jQuery を使用して要素を選択します。
以下は、削除のために className プロパティを使用する更新された jQuery コードです。 また、段落には、削除する 5つのクラスが含まれるようになりました。
<!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>
出力：
著者： Habdul Hazeez
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