デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.empty( )内容を削除

構文

内容を削除返値:jQueryオブジェクト
jQo.empty( )ver1.0〜

機能

jQueryオブジェクトで指定した要素の内容(子孫要素やテキストなど)を削除します。jQueryオブジェクトで指定した要素は削除しません

解説

内容を削除します

サンプル(empty/01.html)を開いてbody内にdiv要素が1つあることを確認してください。div要素の中にはテキストで「test」と記載されています。

<div>test</div>

jQueryは以下の様に記述され、buttonをクリックするとdiv要素の内容を削除します。

$("button").click(function(){
	$("div").empty();
})

結果として、buttonをクリックするとdiv要素内のテキストが削除されます。div要素自体は削除されないことに注意してください。div要素ごと削除したい場合はremoveメソッドを利用します。
→参考:removeのサンプル(remove/01.html

子孫要素をすべて削除します

サンプルempty/01.htmlではテキストだけを削除しましたが、emptyメソッドは子孫要素すべてを消すことができます。サンプル(empty/02.html)を開いてbody内の構成を確認してください。ul要素内にol要素が入った入れ子構造になっています。このうちul要素の最初のli要素にはtestのid属性が付いています。

jQueryは以下の様に記述され、buttonをクリックするとtestのid属性が付いた要素のコンテンツを削除します。

$("button").click(function(){
	$("#test").empty();
})

結果として、buttonをクリックするとtestのid属性が付いたli要素の子孫要素であるol要素とその中にあるli要素すべてが削除されます。testのid属性が付いたli要素自体は残るため、リストの先頭にある黒丸は残ります。

関連項目

要素ごと削除したい場合はremoveメソッドを利用します。

メモ

safariのバグ?

Macのsafari(ver5.1.7)でバグを見つけました。サンプル(empty/test01.html)は以下の様にdiv要素内にb要素のみを入れています。この場合buttonをクリックしてもコンテンツが消えないバグがありました。

<div><b>hello wolrd</b></div>

しかしブラウザウインドウをリサイズすると消えることから、jQueryのバグではなくsafariの描画系のバグだと思います。

このバグはdiv要素の中にb要素だけでなくテキストも合わせて入れることで発生しなくなりました。サンプル(empty/test01b.html)では以下の様にhelloの部分をb要素の外に出して普通のテキストにしています。このサンプルではバグは発生しません。

<div>hello <b>wolrd</b></div>