[JavaScript]remove();とempty();

remove();とempty();について

今回はremove();とempty();について説明していきたいと思います。
どちらも取得した要素を削除するメソッドですがそれぞれ役割が違うので解説していきます。

まずは下記のようなhtmlを定義しておきます。

削除.html

<div class="contents">
  <div class="content_a">
    <div class="content_b">
    </div>
  </div>
</div>

<a class="delete">削除</a>

remove();

まずremove();ですがこれは指定した要素（子孫要素を含む）を削除します.

remove.js

$(function(){
  $('.delete').on('click', function(){
    $('content_a').remove();
  });
});

まず$('.delete')つまり、class="delete"である「削除」をクリックするとイベントが発火します。
クリックをするとclass="content_a"に対してremoveしているので、content_aと　　content_bが削除されます。

empty();

empty();は指定した要素の子孫要素を削除します。
指定した要素自体は削除されないのが特徴です。

remove.js

$(function(){
  $('.delete').on('click', function(){
    $('content_a').empty();
  });
});

これでcontent_aの子要素であるcontent_bのみが削除されます。

どのタイミングで使い分けるか？

どちらも削除するならremove();だけ使えば良いのでは、と思うかもしれませんが、例えば下記のようなコードがあります。

削除.html

<div class="main_contents">
  <div class="content_a">
    <div class="content_b">
    </div>
  </div>
</div>

<div class="sub_contents">
  <div class="content_a">
    <div class="content_b">
    </div>
  </div>
</div>


<a class="delete">削除</a>

この時に削除をクリックした時sub_contentsのclass="content_a"以下を削除したい場合

remove.js

$(function(){
  $('.delete').on('click', function(){
    $('content_a').remove();
  });
});

このように記述してしまうと同じクラス名であるclass="main_contents"以下のclass="content_a"も削除されてしまいます。
こういった場合に

remove.js

$(function(){
  $('.delete').on('click', function(){
    $('sub_contents').empty();
  });
});

このように記述すればclass="main_contents"以下を削除することなく、class="sub_contents"以下の要素だけを削除することができます。