jQueryで要素を削除する色々な方法「remove()・empty()・unwrap()」

jQueryを使って要素を削除する方法をご紹介いたします。要素を削除するといってもremove()やempty()など、色々な方法がありますので、それぞれの違いについて解説したいと思います。

jQueryで要素を削除する色々な方法

HTMLはシンプルに以下のようにします。


<div id="parent">
  <p id="child">子要素</p>
</div>
<button id="delete">要素を削除</button>

remove()を使うと、指定した要素毎、子要素も含めて削除します。


<script>
$("#delete").on("click", function(){
  $("#parent").remove();
});
</script>

「要素を削除」ボタンをクリックすると、HTMLは以下のように変化します。


<button id="delete">要素を削除</button>

#parentと子要素がすべて削除されていますね。

empty()を使うと、要素の中身だけを空にします。


<script>
$("#delete").on("click", function(){
  $("#parent").empty();
});
</script>

削除ボタンをクリックすると、HTMLは以下のように変化します。


<div id="parent">
</div>
<button id="delete">要素を削除</button>

#parentの中身、つまり子要素だけが削除されているのがわかりますね。

unwrap()を使うと親要素のみを削除し、指定した要素は残します。


<script>
$("#delete").on("click", function(){
  $("#child").unwrap();
});
</script>

削除ボタンをクリックすると、HTMLは以下のように変化します。


<p id="child">子要素</p>
<button id="delete">要素を削除</button>

親要素である#parentのみが削除され、指定した#childは残ります。

jQueryを使った色々な要素の削除方法についてご紹介いたしました。それぞれ挙動が異なるので、状況に合わせて使い分けましょう。