アイコンWeb制作実験

HTML/CSS/jQuery/Fabric.js
を試した様子と結果です.

jQueryで要素を削除するremoveとempty、hideとhtmlとの違い

イメージ

公開:

jQueryの要素を削除するメソッドであるremoveとemptyの違いです。また、hideとhtmlでも消せますがその違いです。

以下3色のdivで囲って構成した基本構造を元に試します。水色のboxBをセレクタとし、ボタンを押すとそれぞれのメソッドが実行されます。

  • boxA 赤
  • boxB 青
  • boxC 緑

removeとemptyの違いの、実際の様子

各ボタンを押して実行後、原型と比べてみてください。

原型

boxAの文

boxBの文

boxCの文

  • リストA1
  • リストA2
$('.boxB').remove()を

boxAの文

boxBの文

boxCの文

  • リストA1
  • リストA2
$('.boxB').empty()を

boxAの文

boxBの文

boxCの文

  • リストA1
  • リストA2
  • removeはセレクタであるboxBごと消えました。
  • emptyはセレクタであるboxBは残り、中の要素のみが消えました。

(このページを再読込します。)

hideとhtmlの違いの、実際の様子

hideのみはボタンを再度押すと戻ります。

$('.boxB').hide()を

boxAの文

boxBの文

boxCの文

  • リストA1
  • リストA2
$('.boxB').html('')を

boxAの文

boxBの文

boxCの文

  • リストA1
  • リストA2
  • hideはセレクタであるboxBごと消えました。
  • htmlはセレクタであるboxBは残り、中の要素のみが消えました。

(このページを再読込します。)

まとめ

  • removehideセレクタごと消えます
  • emptyhtmlセレクタは残り、中の要素のみが消えます

hideshowメソッドなどで消した要素を再度表示できます。実際上のデモもshowメソッドを使用しています。

htmlは本来は以下のように要素を変更したり新規生成したりするものです。元々ある子孫要素は全て入れ替えられます。

		$('.boxB').html('<p>文字が入りました</p>');

実験デモはその引数(''内)が空なので空の要素と入れ替わったまでです。引数を変数や関数にし、たまたまその値が空になる場合はいいですが、削除する目的でしたらremoveemptyがいいでしょう。