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

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

.unwrap( )外側のタグを外す

構文

外側にあるタグを外す返値:jQueryオブジェクト
jQo.unwrap( )ver1.4〜

機能

jQueryオブジェクトで指定した要素の外側にあるタグを外します

解説

外側にあるタグを外します

サンプル(wrap/01.html)を開いてbody内の構成を確認してください。3つのa要素(リンク)があり、その中にb要素があります。

<a href="#"><b>test</b></a><br>
<a href="#"><b>test</b></a><br>
<a href="#"><b>test</b></a><br>

jQueryは以下の様に記述され、buttonをクリックするとb要素の外側にあるタグ(a要素)を外します。

$("button").click(function(){
	$("b").unwrap();
})

結果として、buttonをクリックするとa要素(リンク)が外れてb要素だけになります。

関連項目

選択した要素を個別に囲みたい場合はwrapメソッドを利用します。
選択した要素をまとめて囲みたい場合はwrapAllメソッドを利用します。
選択した要素の子要素(コンテンツ)を囲みたい場合はwrapInnerメソッドを利用します。

メモ

指定したタグを外すメソッドがあっても良いと思う。例えばunwrap/01.htmlでaタグを指定すると、aタグだけが外れるようなメソッドとか。でないとunwrap/01.htmlのように消したいタグの内側にタグ(サンプルではb要素)が必要になってしまいます。removeメソッドとかだと中身ごと無くなってしまうし...。