Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています(^^) 週末はレストランやコンビニのお菓子のことを書いています。

jQuery 要素を削除する remove() empty()

今回は、jQueryの「remove()」と「empty() 」について書きます。


両方とも、要素を削除するメソッドです。

1.「remove()」
removeは、マッチしている自身の要素も含めて、子要素も全て削除します。

基本的にこのように使います。
例1

$('div').remove();

例2

<body>

	<div class="main">
	  <div class="hey">HEY!</div>
	  <div class="foo">Foooooo!</div>
	</div>

	<script>
		$(function(){
			$('div').remove();
		});
	</script>
</body>

こちらを実行すると、div要素が削除され、何も表示されません。

引数は、こんな感じです。

.remove([ selector ]);

selectorを指定すると、指定した条件にあったものだけ削除されます。

<body>

	<div class="main">
	  <div class="hey">HEY!</div>
	  <div class="foo">Foooooo!</div>
	</div>

	<script>
		$(function(){
			$('div').remove('.hey');
		});
	</script>
</body>

実行結果
f:id:gupuru:20140607151819p:plain
「hey」だけが削除されています。


2.「empty() 」
emptyは、要素内の子要素を全て削除します。
「empty」は、中身を削除する所が「remove」との違いです。
「remove」は、要素そのものを削除します。しかし、「empty」は、中身だけが削除され、要素は残ります。

基本的にこのように使います。
例1

$('.hey').empty();

例2

<body>

	<div class="main">
	  <div class="hey">HEY!</div>
	  <div class="foo">Foooooo!</div>
	</div>

	<script>
		$(function(){
			$('.hey').empty();
		});
	</script>
</body>

実行結果
f:id:gupuru:20140607152411p:plain
要素の中身だけ削除されています。

引数はこんな感じです。

.empty() 

引数は、無いです(笑)


まとめると・・・
・remove:要素ごと全て削除する。
・empty:中身を削除する。要素は残る。

これで、終わります。


参考サイト
.remove() | jQuery 1.9 日本語リファレンス | js STUDIO
.empty() | jQuery 1.9 日本語リファレンス | js STUDIO