【JavaScript】HTML要素からclass属性を削除する方法

JavaScriptでHTML要素からclass属性を削除する

JavaScriptでHTML要素からclass属性を削除するためには、classListプロパティのremove()メソッドを使います。

< HTML >

<p id="target" class="default_class remove_class">HTML要素からclass属性を削除する</p>

< JavaScript >

// ターゲット要素を取得する
const target = document.querySelector('#target');

// class属性を削除する
target.classList.remove('remove_class');

JavaScriptでclass属性を削除した後のHTML要素は以下になります。

< class属性削除後のHTML >

<p id="target" class="default_class">HTML要素からclass属性を削除する</p>

全てのclass属性を一括で削除する方法

JavaScriptでHTML要素の全てのclass属性を一括で削除するためには、classListプロパティを直接編集します。

< HTML >

<p id="target" class="remove_class_1 remove_class_2">HTML要素から全てのclass属性を削除する</p>

< JavaScript >

// ターゲット要素を取得する
const target = document.querySelector('#target');

// HTML要素から全てのclass属性を削除する
target.classList = '';

JavaScriptで全てのclass属性を削除した後のHTML要素は以下になります。

< class属性削除後のHTML >

<!-- 「class」の属性名のみ残る場合もあります。 -->
<p id="target">HTML要素から全てのclass属性を削除する</p>

まとめ

JavaScriptを使ってHTML要素の一つのclass属性を削除するには、classListプロパティのremove()メソッドを使います。

全てのclass属性を一度に削除したい場合には、classList属性を直接編集しましょう。

【JavaScript】HTML要素にclass属性を追加する方法

JavaScriptを使って、HTML要素にclass属性を追加する方法をご紹介します。また、複数のclass属性を一度に追加する方法も併せてご紹介しています。

maaengineerhouse.com