JavaScript

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

JavaScript

 

今回は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()メソッド

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()と違って、親要素も削除されてしまうことを覚えておきましょう。

まとめ

  • empty()メソッドは指定した要素の中にある子要素を削除する
  • remove()メソッドは単純に指定した要素そのものを削除する

 

 

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

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です