【JavaScriptメソッド】empty()とremove()メソッドの違いについて簡単にまとめてみた！

今回はjQueryのempty()メソッドとremove()メソッドの違いについて簡単にまとめ他ので解説したいと思います。どちらも子要素を全て削除するメソッドではありますが、それぞれ違いがあるので注意して使用しましょう。

この記事の内容

empty()メソッド

empty()メソッドは指定した要素の中にある子要素を削除します。

例を見ていきましょう。

<ul id="list">
    <li id="item1">A</li>
    <li id="item2">B</li>
    <li id="item3">C</li>
</ul>

$("#list").empty();

上記のような記述をすることで、idがlistの子要素（厳密にはAとBとC）が全て削除されます。指定した要素の子要素を削除するメソッドなので、指定した親要素自身は残ることがポイントです。

要素を追加するメソッド.append()とセットで覚えるのがいいですね。

remove()メソッドは単純に指定した要素そのものを削除します。

同様に例を見ていきましょう。

<ul id="list">
    <li id="item1">A</li>
    <li id="item2">B</li>
    <li id="item3">C</li>
</ul>

$("#list").remove();

上記のような記述をすることで、idがlistの要素全てが削除されます。empty()と違って、親要素も削除されてしまうことを覚えておきましょう。

今回はjQueryのemptyメソッドとremoveメソッドの違いについて紹介しました。大まかな機能としては似ていますが、親要素が削除されるかそうでないかという大きな違いがあるので、ぜひこの機会に覚えてしまいましょう。