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

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

.detach( )データを維持したまま要素を削除

構文

データを維持したまま要素を削除返値:jQueryオブジェクト
jQo.detach( [セレクタ] )ver1.4〜

機能

jQueryオブジェクトで指定した要素(子孫要素を含む)を削除します。引数にセレクタを設定することで、削除する対象を絞ることができます。返値で得られるjQueryオブジェクトは削除された要素なのですが、これはイベントや変数などのデータを保持しています

解説

要素を子孫要素ごと削除します

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

<div>test</div>

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

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

結果として、buttonをクリックするとdiv要素がテキストごと削除されます。

引数を利用して削除対象を絞る

サンプル(detach/02.html)を開いてbody内の構成を確認してください。ul要素内にol要素が入った入れ子構造になっています。そして以下の様に2つのli要素にtestのclass属性が付いています。

<ul>
	<li>itemA
		<ol>
			<li class="test">itemA1</li>
			<li>itemA2</li>
			<li>itemA3</li>
		</ol>
	</li>
	<li>itemB
		<ol>
			<li>itemB1</li>
			<li class="test">itemB2</li>
			<li>itemB3</li>
		</ol>
	</li>
</ul>

jQueryは以下の様に記述され、buttonをクリックするとli要素のうち引数で指定したtestのclass属性を持つli要素(itemA1とitemB2)を削除します。

$("button").click(function(){
	$("li").detach(".test");
})

結果として、buttonをクリックするとtestのclass属性を持つ要素が削除されます。

機能を保持したまま削除

ここまでのサンプルはすべてremoveメソッドでも可能です。ではdetachメソッドとremoveメソッドの違いは何でしょうか?。それはdetachは機能を保持したまま要素を削除できる点です。削除してしまうから機能を保持しても無意味と思うかもしれませんが、削除した後で再び利用するケースがある場合は便利でしょう。

サンプル(detach/03.html)を開いてbody内の構成がdetach/01.htmlと同じ事を確認してください。しかしjQueryは変更されており、まず以下の様にdiv要素にclickイベントが設定され、クリックするとアラートを表示するようになっています。

$("div").click(function(){
	alert("CLICK");
})

さらにbuttonをクリックしたときの処理を確認してください。以下の様にtoggleイベントで2つのfunction(detachFuncとappendFunc)を交互に実行するようにしています。

$("button").toggle(detachFunc, appendFunc);

最初のクリックで実行されるdetachFuncは、以下の様に設定されdetachメソッドでdiv要素を削除し、削除した要素(jQueryオブジェクト)を変数myObjに代入します。

function detachFunc(){
	myObj = $("div").detach();
}

次のクリックで実行されるappendFuncは、以下の様に設定されdetachメソッド削除された要素である変数myObjをappendメソッドを利用して再びbody内に設置します。

function appendFunc(){
	$("body").append(myObj)
}

このサンプルでポイントなのは、div要素を削除して再び追加したdiv要素もクリックするとアラートを表示する点です。最初にdivにclickイベントを設定しているから当たり前のような気もしますが、removeメソッドでは削除した際にイベントなどの情報が破棄されるため、消した後で追加したdiv要素はクリックしてもアラートを表示しません。

サンプル(detach/03b.html)を開いてbody内の構成がdetach/03.htmlと同じ事を確認してください。jQuertyはdetachFuncだけが以下の様に変更されています(detachをremoveに変更しただけです)。

function detachFunc(){
	myObj = $("div").remove();
}

このサンプルでは一度消したあとで表示したdiv要素はイベントなどの情報が消えているため、クリックしてもアラートが表示されません。ということでdetachメソッドはremoveメソッドと比べて機能を持った要素を表示したり削除する場合には非常に便利なメソッドだと思います。

関連項目

機能を保持する必要がない場合はremoveメソッドを利用します。

メモ

イベントハンドラメソッドのonを利用すればremoveでもできるけれど

イベントハンドラメソッドのonは動的な変化にも対応できるイベントのため、removeメソッドでもdetachメソッドと同じようなことができます。サンプル(detach/test01.html)ではdiv要素に設定していたclickイベントを以下の様にonに変更しています。

$(document).on("click","div", function(){
	alert("CLICK");
})

そしてdetachメソッドの代わりにrmoveメソッドに変更しました。

function detachFunc(){
	myObj = $("div").remove();
}

onイベントはhtmlの構成が動的に変化しても対応できるため、removeメソッドで削除された要素が再び表示される際に自動的にイベントが付加されます。その結果removeメソッドを利用してもdetachメソッドのサンプルと同様に削除した後でもクリックするとアラートが表示されます。

個人的には削除した要素を変数に入れて管理したいので、特定の要素を「表示/削除を繰り返す」場合はdetachメソッドを使うと思います。