【jQuery】要素を削除する.remove()と.empty()の違い

JavaScriptで要素を削除するメソッドに、.empty() と .remove()があります。
どちらも要素を削除する、という点では同じなのですが、挙動が少し違うので、これを機にまとめてみました。

.remove()
こちらは単純に指定した要素そのものを削除します。
例としては下記のように要素が指定されていた時に、

<ul id="list01">
    <li id="item01">item01</li>
    <li id="item02">item02</li>
    <li id="item03">item03</li>
</ul>

/* javascript */
$("#item01").remove();

上記のJavaScriptを実行すると、idに「item01」が指定された li 要素が削除されるというもの。
指定する要素は、id だけでなく、勿論classでもOKです。
なお、class を指定した場合は、一致する class がすべて削除されます。

.empty()
こちらは指定した要素の中にある子要素を削除します。
サンプルコードは下記の通り。
id に「list01」が指定された ul 要素に対して、.empty() メソッドを指定すると、ul の子要素である li がすべて削除されます。

<ul id="list01">
    <li id="item01">item01</li>
    <li id="item02">item02</li>
    <li id="item03">item03</li>
</ul>

/* javascript */
$("#list01").empty();

.empty() メソッドについては、「指定した要素の中身を空にする」と覚えるとわかりやすいかな。
なお、あくまでも指定した要素の子要素を削除するメソッドなので、指定した親要素自身は残ります。

簡単にではありますが、大きな違いはこんな感じ。
.remove() は単純明快なので、ある特定の要素を消す、というときに使用します。
一方で .empty() については、一度リストなどを再描画する際、ul などは残しつつ、リストの項目である li だけを削除する、というときに使えます。
以前投稿した、要素を追加するメソッドとセットで覚えるのがおすすめですね。

【備忘録】jQueryの要素追加のメソッド一覧
https://cpoint-lab.co.jp/【備忘録】jqueryの要素追加のメソッド一覧/

特に .empty() については、.append() とセットで覚えると、様々な処理やより扱いやすいかと思います。