特定のHTML要素のclassListを全て削除(リセット)する方法
#JavaScript
にメンテナンス済み
特定の HTML 要素に含まれている class を削除する場合、classList.remove()を使用します。
ただ、この方法を使用する場合、対象の要素にどういった class 名が使用されているか知っておく必要があります。
また、classList は読み取り専用プロパティなので、直接上書きによってリセットすることはできません。
今回は対象 HTML 要素にどのような class が設定されていたとしても、無条件ですべてのクラス名を削除する方法を紹介します。
ソースコード
以下のコードで実現可能です。
// 対象HTML要素の取得
const element = document.querySelector('div#test');
// 全てのクラス名を削除
element.classList.remove(...element.classList);
解説
element.classList を呼び出すことで、DOMTokenListを取得することができます。 この DOMTokenList はイテラブルなオブジェクトであり、各シーケンスでクラス名が返却されます。
また、classList.remove は、削除したいクラス名を配列で渡すことができます。
この2点を利用して、スプレッド構文(…element.classList)を利用して対象 HTML 要素のすべてのクラス名を削除することができます。