【JavaScript】 要素の「クラス」を「すべて削除」する方法

こんにちは、さち です。

先日、JavaScript を使っているときに、特定の要素（HTML）が持っている「クラス」をすべて削除したいことがありました。

「クラス」の名前も個数も分からない状態で、すべての「クラス」を削除するにはどうしたらいいの……？

ということで、解決方法を見ていきましょう。

【方法1】 「setAttribute」を使う

class 属性に「空の値」を渡すことで、すべてのクラスを削除します。シンプルで分かりやすい方法です。

HTML

<div class="one two three"></div>

JavaScript

let div = document.querySelector('div');
console.log(div);// <div class="one two three">

div.setAttribute('class', '');// class の値を空にする
console.log(div);// <div class="">

【方法2】 「classList」を使う

element.classList.remove() に自身が持つ「クラス一覧」を渡すことで、すべてのクラスを削除します。

HTML

<div class="one two three"></div>

JavaScript

let div = document.querySelector('div');
console.log(div);// <div class="one two three">

div.classList.remove(...div.classList);// クラスの配列を展開して渡す
console.log(div);// <div class="">

div.classList には要素の持つすべてのクラスが「配列」として入っています。

...div.classList とすることで、「配列」の中身がすべて展開されます。

これを div.classList.remove() に渡すことで、すべてのクラスが削除されます。