Ribbit.work

特定のHTML要素のclassListを全て削除(リセット)する方法

JavaScript

last modified date2021-10-15

publish date2021-10-14

特定の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要素のすべてのクラス名を削除することができます。

この記事をシェア

この記事を読んだ方におすすめの記事

kuromoji.jsで形態素解析
2021-12-4

kuromoji.jsで形態素解析

TypeScriptJavaScript
レコードのサブテーブルを並び替えて登録する【Kintone JavaScriptカスタマイズ】
2021-12-4

レコードのサブテーブルを並び替えて登録する【Kintone JavaScriptカスタマイズ】

JavaScriptKintone
レコード一覧表示時(app.record.index.show)のサンプルコード集【Kintone】
2021-11-29

レコード一覧表示時(app.record.index.show)のサンプルコード集【Kintone】

JavaScriptKintone
スライダーを使って数値を設定できるKintoneプラグイン【無料公開】
2021-11-26

スライダーを使って数値を設定できるKintoneプラグイン【無料公開】

KintoneJavaScriptTypeScript

最新の記事

kuromoji.jsで形態素解析
2021-12-4

kuromoji.jsで形態素解析

TypeScriptJavaScript
レコードのサブテーブルを並び替えて登録する【Kintone JavaScriptカスタマイズ】
2021-12-4

レコードのサブテーブルを並び替えて登録する【Kintone JavaScriptカスタマイズ】

JavaScriptKintone
レコード一覧表示時(app.record.index.show)のサンプルコード集【Kintone】
2021-11-29

レコード一覧表示時(app.record.index.show)のサンプルコード集【Kintone】

JavaScriptKintone
スライダーを使って数値を設定できるKintoneプラグイン【無料公開】
2021-11-26

スライダーを使って数値を設定できるKintoneプラグイン【無料公開】

KintoneJavaScriptTypeScript