jQueryのremoveClass()メソッドとclassListプロパティを使って全てのCSSクラスを削除する
2024-04-02
jQuery/JavaScriptで全てのCSSクラスを削除する方法
jQueryとJavaScriptを使って、要素から全てのCSSクラスを削除する方法について解説します。
方法
以下の2つの方法があります。
jQueryのremoveClass()メソッドを使う
removeClass()メソッドは、要素から指定されたCSSクラスを削除します。全てのクラスを削除するには、引数なしで呼び出すだけです。
例：
<div class="class1 class2 class3">
要素の内容
</div>
// 全てのCSSクラスを削除
$( ".class1" ).removeClass();
JavaScriptのclassListプロパティを使う
classListプロパティは、要素のCSSクラスのリストを取得および操作できます。全てのクラスを削除するには、remove()メソッドをclassListプロパティに対して呼び出します。
<div class="class1 class2 class3">
要素の内容
</div>
// 全てのCSSクラスを削除
const element = document.querySelector(".class1");
element.classList.remove("class1", "class2", "class3");
補足
- 上記の例では、特定の要素から全てのCSSクラスを削除しています。
- 特定の条件に合致する要素から全てのCSSクラスを削除したい場合は、jQueryの
filter()メソッドやJavaScriptのquerySelectorAll()メソッドなどを組み合わせて使用できます。 - 複数のクラスを削除したい場合は、
removeClass()メソッドやclassList.remove()メソッドにスペースで区切ってクラス名を指定できます。
注意事項
- 全てのCSSクラスを削除すると、要素のスタイルが変更される可能性があります。
- 削除する前に、どのクラスを削除するかをよく確認してください。
- 上記以外にも、様々な方法で全てのCSSクラスを削除することができます。
- 詳細については、jQueryやJavaScriptのドキュメントを参照してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルコード</title>
</head>
<body>
<div id="element" class="class1 class2 class3">
要素の内容
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// jQueryのremoveClass()メソッドを使って全てのCSSクラスを削除
$("#element").removeClass();
// JavaScriptのclassListプロパティを使って全てのCSSクラスを削除
const element = document.querySelector("#element");
element.classList.remove("class1", "class2", "class3");
});
</script>
</body>
</html>
上記のコードは、id="element"を持つ要素から全てのCSSクラスを削除する例です。
$("#element").removeClass();
const element = document.querySelector("#element");
element.classList.remove("class1", "class2", "class3");
実行方法
- 上記のコードをHTMLファイルに保存します。
- ブラウザでHTMLファイルを開きます。
- JavaScriptコンソールを開きます。
- JavaScriptコンソールに以下のコードを入力して実行します。
$(document).ready(function() {
// jQueryのremoveClass()メソッドを使って全てのCSSクラスを削除
$("#element").removeClass();
// JavaScriptのclassListプロパティを使って全てのCSSクラスを削除
const element = document.querySelector("#element");
element.classList.remove("class1", "class2", "class3");
});
確認方法
要素のスタイルが変更されていることを確認します。
- すべてのCSSクラスが削除されていることを確認するには、要素を右クリックして「要素の検証」を選択すると、HTMLソースが表示されます。
- HTMLソースを確認すると、
class属性が削除されていることを確認できます。
JavaScriptのsetAttribute()メソッドを使う
setAttribute()メソッドは、要素の属性を設定します。class属性を空文字列に設定することで、全てのCSSクラスを削除できます。
<div id="element" class="class1 class2 class3">
要素の内容
</div>
// 全てのCSSクラスを削除
const element = document.querySelector("#element");
element.setAttribute("class", "");
JavaScriptのreplace()メソッドを使う
<div id="element" class="class1 class2 class3">
要素の内容
</div>
// 全てのCSSクラスを削除
const element = document.querySelector("#element");
element.setAttribute("class", element.getAttribute("class").replace(/\s+/g, ""));
ライブラリを使う
上記の方法を参考に、状況に合わせて適切な方法を選択してください。
javascript jquery dom
