JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでelement.classListをクリアする方法｜remove()の使い方を解説

JavaScriptで要素のクラスをクリア（削除）するには、classList.remove()メソッドを使用します。このメソッドを使えば、指定したクラス名だけを簡単に取り除くことができます。

classList.remove()の基本

classList.remove()は、削除したいクラス名を引数として渡すだけで動作します。カンマ区切りで複数のクラス名を指定すれば、同時に複数のクラスを削除することも可能です。

サンプルコード

以下は、ボタンをクリックすると要素からクラスを削除する実装例です。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
   .removeClass {
      color: red;
   }
</style>
<body>
<p id="remove" class="removeClass">Javascript Tutorial</p>
<button onclick="removeClassName()">Remove</button>
</body>
<script>
   function removeClassName() {
      const element = document.getElementById("remove");
      element.classList.remove("removeClass");
   }
</script>
</html>

プログラムの実行方法

上記のプログラムを実行するには、ファイルを「index.html」などの任意の名前で保存します。次に、VS Codeエディタでファイルを右クリックし、「Open with Live Server」を選択してください。

ブラウザには以下のように表示されます。

JavaScriptでelement.classListをクリアする方法｜remove()の使い方を解説

続いて、「Remove」ボタンをクリックします。

実行結果

ボタンをクリックすると、removeClassクラスが要素から削除され、テキストの色が赤からデフォルトの黒に変わります。

JavaScriptでelement.classListをクリアする方法｜remove()の使い方を解説

補足：すべてのクラスを一括でクリアする方法

要素に付与されたすべてのクラスを一度にクリアしたい場合は、classNameプロパティに空文字列を代入するのが簡単です。

element.className = "";

この方法なら、クラス名を一つずつ指定する必要がなく、すべてのクラスをまとめて削除できます。特定のクラスだけを外したい場合はclassList.remove()、すべてをリセットしたい場合はclassNameと、用途に応じて使い分けるとよいでしょう。

  1. JavaScriptで要素からクラス名を削除する方法【classList.remove()の使い方】

    JavaScriptでHTML要素からクラス名（className）を削除するには、classList.remove()メソッドを使うのが最もシンプルで確実な方法です。このメソッドを使えば、対象の要素から指定したクラスを動的に取り除くことができ、ボタンのクリックなどユーザーの操作に応じてスタイルを切り替える際に非常に便利です。 サンプルコード 以下は、「Remove Class」ボタンをクリックすると、DIV要素からクラス名が削除される例です。 <!DOCTYPE html> <html> <head> <meta name="viewpor

  2. JavaScriptでIDを指定して要素を削除する方法

    JavaScriptでIDを指定して要素を削除するIDを使ってHTML要素を削除するには、remove()メソッドを使用します。このメソッドは、対象のDOM要素をドキュメントから直接取り除くことができる、最もシンプルで直感的な方法です。コード例以下は実際のサンプルコードです。<!DOCTYPE html> <html lang=ja> <head>    <meta charset=UTF-8>    <meta name=viewport content=width=device-width, in