TechNote

事務屋のおぼえがき

トップ > jQuery > jQuery removeとemptyによるDOM要素削除方法の違い

jQuery removeとemptyによるDOM要素削除方法の違い

jQuery

覚えておきたいのでメモ。


jQueryでDOM要素の削除方法は２通りある。
f:id:kojikoji75:20140520214429j:plain
photo credit: Johannes_wl via photopin cc


remove()

そのDOM要素自体を削除する。


empty()

そのDOM要素の子要素のみを削除する。


remove()の使用例と結果

html

<body>
  <div id="sample">
    <p>子</p>
  </div>
</body>

jQuery

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

結果

<body>
</body>




remove()の使用例と結果

html

<body>
  <div id="sample">
    <p>子</p>
  </div>
</body>

jQuery

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

結果

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




あわせて読みたい

jQueryでオシャレかつ機能的なフォーム画面を実装 formly.js - TechNotejQueryでオシャレかつ機能的なフォーム画面を実装 formly.js - TechNote

社内システムだったら必ずフォームのPost送信は多用するし、Webサイトであっても入力画面が存在するところには必ずフォームは必要となる。そんなとき、簡単にオシャ...

jQueryでスライダー機能を実装 - 横幅いっぱいのスライダーFullWideSlider - TechNotejQueryでスライダー機能を実装 - 横幅いっぱいのスライダーFullWideSlider - TechNote

以前のエントリーjQueryでスライダー機能&#...

BootStrap 向けのdatepickerによるカレンダー実装は簡単便利 だけどieには不向きか - TechNoteBootStrap 向けのdatepickerによるカレンダー実装は簡単便利 だけどieには不向きか - TechNote

BootStrap向けのdatepickerによるカレンダー実装が簡単かつ便利だったので使用方法をメモ。1.ダウンロード現在はちゃんと日本語対応版も出ているよう...


Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)

Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)

コアjQuery＋プラグイン/jQuery UI 開発実践技法 (Programmer’s SELECTION)

コアjQuery＋プラグイン/jQuery UI 開発実践技法 (Programmer’s SELECTION)