ITコラム

jQuery

2018.11.13

jQuery【 remove 】要素を丸ごと削除する remove と中身だけ削除する empty

jQuery の remove メソッドを使用すると、指定した要素を丸ごと削除します。これに対して、empty メソッドは、要素の中身を削除します。
今回は、jQuery の remove メソッドと empty メソッドの使い方について紹介します。

1. remove と empty

remove メソッド

remove メソッドは、引数の有無で 2 通りの記述方法があります。

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

$(セレクタ).remove( selector );

remove メソッドの引数の内容は以下の通りです。

.remove( selector )

selector
要素を削除する際にフィルタリングするためのセレクタを指定

empty メソッド

empty メソッドは、次のように記述して使用します。

$(セレクタ).empty( );

▲目次へ戻る

2. remove で要素を削除

要素丸ごと削除

remove メソッドを使用して、要素を丸ごと削除します。
ボタンをクリックしてみて下さい。

こんにちは
Hello
Bonjour

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {

  $("#btn1").on("click", function() {

    $("#div1").remove();
  });
});
//-->
</script>

<div style="background-color:#CCC; padding:20px;">
  <input type="button" id="btn1" value="要素丸ごと削除">
  <div id="div1" style="background-color:skyblue; padding:10px;">
    <span>こんにちは</span>
    <span>Hello</span>
    <span>Bonjour</span>
  </div>
</div>

「$("#div1").remove();」という記述で、id 名 div1 の要素が丸ごと削除されます。
　

削除した要素の復活

remove メソッドで削除した要素を復活させることもできます。
削除ボタンをクリックした後、復活ボタンをクリックしてみて下さい。

こんにちは
Hello
Bonjour

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {

  var d;

  $("#btn2").on("click", function() {

    d = $("#div3").remove();
  });

  $("#btn3").on("click", function() {

    $("#div2").append(d);
  });
});
//-->
</script>

<div id="div2" style="background-color:#CCC; padding:20px;">
  <input type="button" id="btn2" value="要素丸ごと削除">
　<input type="button" id="btn3" value="復活">
  <div id="div3" style="background-color:pink; padding:10px;">
    <span>こんにちは</span>
    <span>Hello</span>
    <span>Bonjour</span>
  </div>
</div>

「d = $("#div3").remove();」のように記述して、remove メソッドの実行時に戻り値を変数 d へ代入します。

remove メソッドの戻り値には削除した要素の情報が収められているため、削除した要素の親要素である div 要素（ id名 = div2 ）に対して「$("#div2").append(d);」と記述すると、変数 d に格納されている削除済要素を再び親要素内に配置することができます。

append メソッドの使用方法についてはjQuery【 append 】テキストや要素の追加をご参照下さい。

▲目次へ戻る

3. remove で条件付き削除

　
remove メソッドを使用して、要素を条件付きで削除します。
各ボタンをクリックしてみて下さい。

１こんにちは
２ Hello
３ Bonjour

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {

  $("#btn4").on("click", function() {

    $("span").remove(":contains('１')");
  });

  $("#btn5").on("click", function() {

    $("span").remove(":contains('２')");
  });

  $("#btn6").on("click", function() {

    $("span").remove(":contains('３')");
  });
});
//-->
</script>

<div style="background-color:#CCC; padding:20px;">
  <input type="button" id="btn4" value="１を削除">
　<input type="button" id="btn5" value="２を削除">
　<input type="button" id="btn6" value="３を削除">

  <span style="background-color:darkkhaki;">１ こんにちは</span>
  <span style="background-color:plum;">２ Hello</span>
  <span style="background-color:darkseagreen;">３ Bonjour</span>
</div>

「$("span").remove(":contains('１')");」という記述で、文字列’１’ を含む span 要素が削除されます。

このように、remove メソッドの引数に「”:contains(‘文字列’)”」を指定すると、要素内の文字列を検索してヒットした要素を丸ごと削除することができます。

▲目次へ戻る

4. empty で要素の中身を削除

　
empty メソッドを使用して、要素の中身を削除します。
ボタンをクリックしてみて下さい。

こんにちは
Hello
Bonjour

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {

  $("#btn7").on("click", function() {

    $("#div4").empty();
  });
});
//-->
</script>

<div style="background-color:#CCC; padding:20px;">
  <input type="button" id="btn7" value="要素の中身を削除">

  <div id="div4" style="background-color:mediumorchid; padding:10px;"> 
    <span>こんにちは</span>
    <span>Hello</span>
    <span>Bonjour</span>
  </div>
</div>

「$("#div4").empty();」という記述で、id 名 div4 の要素の中身が削除されます。

上のサンプルでは、id 名 div4 の要素内の 3 つの span 要素（子要素）も全て削除され、中身が空の div 要素（ div4 ）だけが残ります。

div 要素（ div4 ）は CSS で padding:10px と指定しているため、中身が空になってもその分だけ div4 領域（背景色が紫色）が表示されます。

▲目次へ戻る