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

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

目次

1. remove と empty
2. remove で要素を削除
3. remove で条件付き削除
4. empty で要素の中身を削除

1. remove と empty

　

remove メソッド

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

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

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

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

.remove( selector )

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

　

empty メソッド

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

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

▲目次へ戻る

　

2. remove で要素を削除

　

要素丸ごと削除

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

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

<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 メソッドで削除した要素を復活させることもできます。
削除ボタンをクリックした後、復活ボタンをクリックしてみて下さい。

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

<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 メソッドを使用して、要素を条件付きで削除します。
各ボタンをクリックしてみて下さい。

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

<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 メソッドを使用して、要素の中身を削除します。
ボタンをクリックしてみて下さい。

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

<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 領域（背景色が紫色）が表示されます。

▲目次へ戻る

5. まとめ

jQueryの removeメソッドについて、いかがでしたでしょうか。

「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。

今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。

→ 就職支援付き無料プログラミングスクール「プログラマカレッジ」

▲目次へ戻る