classList.remove()

クラスリスト・リムーブ（DOM操作）

意味クラスを削除

classList.remove()とは？

指定したクラス値を要素から削除します。存在しない場合は何もしない。

classList.remove()の具体的な使い方

単一のクラスを要素から削除する例

<button onclick='removeClassFromElement()'>classList.removeの使用例</button>
<div id='removeElement' class='my-element old-class'>要素</div>

<script>
function removeClassFromElement() {
  const element = document.getElementById('removeElement');
  element.classList.remove('old-class');
  alert('クラス削除後: ' + element.className);
}
</script>

ボタンをクリックすると、'removeElement'というIDを持つ要素から'old-class'クラスを削除します。削除後の要素のクラス名をアラートで表示します。

複数のクラスを要素から削除する例

<button onclick='removeMultipleClasses()'>複数クラスの削除</button>
<div id='multiRemoveElement' class='multi-class class1 class2 class3'>複数クラスの例</div>

<script>
function removeMultipleClasses() {
  const element = document.getElementById('multiRemoveElement');
  element.classList.remove('class1', 'class2', 'class3');
  alert('残りのクラス: ' + element.className);
}
</script>

ボタンをクリックすると、'multiRemoveElement'というIDを持つ要素から一度に複数のクラス（'class1', 'class2', 'class3'）を削除します。削除後の要素のクラス名をアラートで表示します。

classList.remove()に関するよくある質問

Q. 存在しないクラスを削除するとどうなる？

A. 存在しないクラスをremove()メソッドで削除しようとしても、エラーは発生せず、単に無視されます。元の要素のクラスリストは変更されません。

Q. remove()の戻り値は何ですか？

A. classList.remove()メソッドは何も返しません（undefined）。クラスが削除されたかどうかを確認するには、削除後にclassList.contains()を使用するか、classList自体を確認する必要があります。

Q. すべてのクラスを一度に削除できる？

A. classList.remove()では全クラスを一度に削除することはできません。すべてのクラスを削除したい場合は、element.className = '' を使用するか、while文でclassList.length > 0の間、最初のクラスを繰り返し削除する方法があります。

classList.remove()が学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのclassList.remove()やquerySelectorAll()、appendChild()、textContent、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。