remove()メソッド

「remove()」は、対象となる要素や子要素などを削除することができるメソッド。

$("セレクタ").remove()

指定したセレクタだけでなく、その子要素も含めてまるごと削除されてしまう点に注意する。

classやidなどの属性を指定して削除

remove()メソッドは引数を指定することで、対象となる要素を特定することも可能。

$('.two').remove();

特定の要素だけを削除

remove()の引数に「:contains()」を指定することで、要素内の文字列を検出して削除することができるようになる。

<body>
  <p>おはよう</p>
  <p>こんにちは</p>
  <p>こんばんは</p>

  <script>
    $('p').remove(':contains("こんにちは")');
  </script>
</body>

この例では、3つのp要素が配置されている。そこで、p要素に対して「remove(‘:contains(“こんにちは”)’)」と記述することで、2つ目のp要素だけが削除される。

削除した要素を復活する

remove()メソッドは実行すると「戻り値」として、削除した要素を返してくれる特徴がある。この点を上手く活用すれば、削除した要素を復活させることも簡単に実現できる。

<body>
  <div>
    <p>サンプルテキスト</p>
  </div>
  <button>復活</button>

  <script>
    const p = $('p').remove(); //削除したp要素の情報を変数「p」に格納

    $('button').click(function () {
      $('div').append(p); //格納されたp要素を再びdiv要素内に配置
    });
  </script>
</body>
inserted by FC2 system