JavaScriptで要素からクラス名を削除する方法【classList.remove()の使い方】
JavaScriptでHTML要素からクラス名（className）を削除するには、classList.remove()メソッドを使うのが最もシンプルで確実な方法です。このメソッドを使えば、対象の要素から指定したクラスを動的に取り除くことができ、ボタンのクリックなどユーザーの操作に応じてスタイルを切り替える際に非常に便利です。
サンプルコード
以下は、「Remove Class」ボタンをクリックすると、DIV要素からクラス名が削除される例です。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.newStyle {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
width: 100%;
padding: 25px;
background-color: rgb(147, 80, 255);
color: white;
font-size: 25px;
box-sizing: border-box;
text-align: center;
}
</style>
</head>
<body>
<h1>JavaScriptでクラス名を削除するサンプル</h1>
<button class="btn">Remove Class</button>
<h2>上のボタンをクリックすると、下のdiv要素からクラス名が削除されます</h2>
<div class="newStyle" id="sampleDiv">
これはDIV要素です。
</div>
<script>
document.querySelector(".btn").addEventListener("click", removeClassName);
function removeClassName() {
var element = document.getElementById("sampleDiv");
element.classList.remove("newStyle");
}
</script>
</body>
</html>
実行結果
上記のコードをブラウザで開くと、次のような画面が表示されます。
「Remove Class」ボタンをクリックすると −
紫色の背景を持つDIV要素から「newStyle」クラスが削除され、適用されていたスタイルが解除されているのが確認できます。
ポイント解説
document.querySelector(".btn")でボタン要素を取得し、addEventListener()でクリックイベントを登録しています。classList.remove("newStyle")を呼び出すことで、IDが「sampleDiv」の要素から「newStyle」クラスが削除されます。classList.remove()は引数を複数渡すことで、一度に複数のクラスを削除することも可能です（例：element.classList.remove("class1", "class2")）。- 古いブラウザへの対応が必要な場合は、
element.className = element.className.replace("newStyle", "").trim()のように文字列を置換する方法もあります。
-
JavaScriptでクリックした要素にアクティブクラスを追加する方法
Webページのボタンやタブメニューなどでは、現在選択されている要素を視覚的に強調表示したいケースがよくあります。JavaScriptを使えば、クリックされた要素に「active」クラスを動的に追加し、それまでアクティブだった要素からクラスを外すことで、この処理を簡単に実装できます。実装のポイント基本的な流れは以下のとおりです。querySelectorAll() ですべてのボタン要素を取得する各ボタンに addEventListener() でクリックイベントを登録するクリック時に、既存の「active」クラスを持つ要素からクラスを削除するクリックされた要素に「active」クラスを追加するサ
-
JavaScriptで要素からクラス名を削除する方法【classList.remove()の使い方】
JavaScriptでHTML要素からクラス名（className）を削除するには、classList.remove()メソッドを使うのが最もシンプルで確実な方法です。このメソッドを使えば、対象の要素から指定したクラスを動的に取り除くことができ、ボタンのクリックなどユーザーの操作に応じてスタイルを切り替える際に非常に便利です。 サンプルコード 以下は、「Remove Class」ボタンをクリックすると、DIV要素からクラス名が削除される例です。 <!DOCTYPE html> <html> <head> <meta name="viewpor