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

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

.remove( )要素を削除

構文

要素を削除返値:jQueryオブジェクト
jQo.remove( [セレクタ] )ver1.0〜

機能

jQueryオブジェクトで指定した要素(子孫要素を含む)を削除します(返値は削除した要素となります)。引数にセレクタを設定することで、削除する対象を絞ることができます。

ただし「削除」とはいっても「HTML上から外される」だけでデータとしては存在しています。メモ「削除しても存在している」にサンプルを載せています。

解説

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

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

<div>test</div>

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

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

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

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

まずはサンプル(remove/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要素を削除します。

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

結果として、buttonをクリックするとli要素がすべて削除されます(button以外すべて消えます)。

続いてサンプル(remove/03.html)を開いてbody内の構成がremove/02.htmlと同じ事を確認してください。しかしjQueryは以下の様に変更され、removeメソッドの引数にtestのclass属性が設定されています。

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

このサンプルではセレクタで指定したli要素のうち、testのclass属性を持つ要素(itemA1とitemB2)のみを削除します。

コンテンツの内容によって削除

本家のサイトで引数に:containsメソッドを利用して、内容によって要素を削除するサンプルがあったので、ここでも紹介しようと思います。サンプル(remove/04.html)を開いてbody内にp要素が3つあり、それぞれにテキストが含まれているのを確認してください。

<p>this is an apple</p>
<p>this is a orange</p>
<p>this is a banana</p>

jQueryは以下の様に記述され、buttonをクリックすると:containsメソッドを利用して「apple」を含むp要素を削除します。

$("button").click(function(){
	$("p").remove(":contains('apple')");
})

上記remove/04.htmlは本家ページを参考にしたものですが、個人的にはremoveメソッドの引数を利用せずにセレクタにまとめてしまった方が分かりやすい気がします。

サンプル(remove/04b.html)を開いてbody内の構成はremove/04.htmlと同じ事を確認してください。jQueryは以下の様に変更され、removeメソッドの引数に設定されていたセレクタをli要素のセレクタとまとめています。

$("button").click(function(){
	$("p:contains('apple')").remove();
})

これでも同じ機能となるので、buttonをクリックするとappleを含むp要素が削除されます。

関連項目

jQueryオブジェクトで指定した要素のコンテンツだけを削除したい場合はemptyメソッドを利用します。
イベントなどを設定した要素を削除したり追加したりしたい場合はdetachメソッドを利用します。

メモ

削除しても存在している

解説では簡単に「削除」と表現しましたが、正確には「HTML上から外している」だけでデータとしては存在しています。まずはサンプル(test01.html)を開いてbody内にdiv要素が3つあり、それぞれにテキストが含まれているのを確認してください。

<div id="test01">test01</div>
<div id="test02">test02</div>
<div id="test03">test03</div>

しかし実際にはdiv要素は2つしか表示されません。それは以下の様にremoveメソッドでHTML上から外されているためです。HTML上から外した要素は再利用できるように変数removeObjに代入して保存しておきます。

var removeObj = $("#test02").remove();

次にbuttonをクリックした時の処理を確認してください。removeObjをappendToメソッドによってbody内に追加しています。実際にbuttonをクリックするとremoveメソッドで外していたdiv要素が追加されます。

$("button").click(function(){
 removeObj.appendTo("body");
})

データとしては存在しているので他のメソッドでHTML上から外した要素を編集することもできます。サンプル(test01b.html)はtest01.htmlとほとんど同じですが、buttonをクリックした時の処理に処理を位置行追加しています(以下のソース2行目)。

$("button").click(function(){
 removeObj.empty();
 removeObj.appendTo("body");
})

このサンプルではremoveした要素に対しemptyメソッドを利用して内容を削除しています。結果としてbuttonをクリックすると、test01.htmlとは異なり文字(test02)が削除された状態で追加されます。

ただし、このように要素を再利用する場合はイベント等の設定も保持できるdetachメソッドの利用を検討しましょう。次のページのdetachメソッドの説明ではremoveメソッドとの比較サンプルを紹介しています。