jQueryでDOM要素の削除

　jQueryを使ってDOM要素を削除しようとしたときにかなり戸惑ったのでメモ代わりにブログ更新。jQueryにはDOM要素を削除するためのメソッドが2つあってremove()とempty()がそれ。

  • remove()：それを呼び出したDOM要素自体とそのすべての子要素を削除する。
  • empty()：それを呼び出したDOM要素のすべての子要素を削除する。

大まかな理解はこれで合ってるのかな。でもjQueryオブジェクトは残るとか書いてあるし、深いところはわからない。具体的には、

<body>
    <div id="div1">
        div1要素
        <p>div1要素の子要素1</p>
        <p>div1要素の子要素2</p>
        <p>div1要素の子要素2</p>
    </div>
</body>

に対して

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

を実行すると、

<body>

</body>

となり、また以下のように

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

を実行すると、

<body>
    <div id="div1">
    </div>
</body>

となる。眠いのでここまで。