Vanilla JavaScriptで要素からクラスを削除する方法｜classList.remove()の基本と実践例

HTML要素からクラスを削除するには、JavaScriptのclassListプロパティが提供するremove()メソッドを使います。すでに「要素にクラスを追加する方法」の記事を読んだことがあれば、削除もまったく同じ仕組みを逆方向に使うだけだとすぐに理解できるでしょう。

まずはclassList.remove()の基本的な構文を確認し、そのあとで実際のコード例を見ていきます。

基本の構文

var element = document.querySelector("selector")
element.classList.remove("class")

このコードでは、まずquerySelector()を使って、指定したセレクター名（タグ名・クラス名など任意のCSSセレクター）に一致するページ内の最初のHTML要素を取得し、変数に格納しています。

続いて、その要素オブジェクトに対してclassList.remove()を呼び出し、引数として削除したいクラス名を指定します。複数のクラスを一度に外したい場合は、element.classList.remove("class1", "class2")のようにカンマ区切りで複数渡すことも可能です。

classList.remove()の実践例

クラスを削除するには、当然ながらクラスが付与された要素が必要です。では、どのクラスを削除してみましょうか？

説明をわかりやすくするため、今あなたが読んでいるこの段落にはitalicというクラスを付けてあります。ご覧のとおり、文字が斜体になっていますね。

それでは、学んだばかりのclassList.remove()のテクニックを使って、この段落の斜体スタイルを解除してみましょう。

var firstParagraph = document.querySelector(".italic")
firstParagraph.classList.remove("italic")

実行結果は以下のとおりです。

補足：italicクラスはサイトのCSSスタイルシートで以下のように定義されているため、このように動作します。

.italic {
  font-style: italic;
}

参考リソース

• MDN Web Docs：Element.classList