jQuery API の remove( selector ) は、selectorにマッチした要素を削除するメソッド。要素に関連付けられているjQueryデータも削除する。
要素に関連付けられているjQueryデータを保持させておきたい場合は、detach( selector )を使う。
detach()のページに、removeとdetachの比較サンプルがある。
記述方法
jQuery( セレクター１ ) . remove( セレクター２ );
「セレクター１」及び「セレクター２」の両方にマッチする要素を削除する。
記述例
jQuery( '.jquery-sample' ) . remove( ':contains("サンプル")' );
クラス名が「jquery-sample」で、尚且つ、コンテンツに「サンプル」を含む要素を削除する。
実装例（サンプル）
- 項目１
- 項目２
- 項目３
- 項目４
- 項目５
実装例（サンプル）の動作について
「項目２を削除」ボタンをクリックすると、項目２を削除する。
「項目４を削除」ボタンをクリックすると、項目４を削除する。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-remove-button-2' ) . click( function () {
jQuery( '#jquery-sample-remove-ul li' ) . remove( ':contains("２")' );
} );
jQuery( '#jquery-sample-remove-button-4' ) . click( function () {
jQuery( '#jquery-sample-remove-ul li' ) . remove( ':contains("４")' );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-remove-button-2' ) . click( function () {
jQuery( '#jquery-sample-remove-ul li' ) . remove( ':contains("２")' );
} );
jQuery( '#jquery-sample-remove-button-4' ) . click( function () {
jQuery( '#jquery-sample-remove-ul li' ) . remove( ':contains("４")' );
} );
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-sample-remove {
width: 300px;
margin: 10px;
padding: 20px;
background-color: pink;
border: 1px solid gray;
border-radius: 10px;
}
-->
</style>
<!--
#jquery-sample-remove {
width: 300px;
margin: 10px;
padding: 20px;
background-color: pink;
border: 1px solid gray;
border-radius: 10px;
}
-->
</style>
HTML
<div id="jquery-sample-remove">
<p>
<button id="jquery-sample-remove-button-2">項目２を削除</button>
<button id="jquery-sample-remove-button-4">項目４を削除</button>
</p>
<ul id="jquery-sample-remove-ul">
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
<li>項目４</li>
<li>項目５</li>
</ul>
</div>
<p>
<button id="jquery-sample-remove-button-2">項目２を削除</button>
<button id="jquery-sample-remove-button-4">項目４を削除</button>
</p>
<ul id="jquery-sample-remove-ul">
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
<li>項目４</li>
<li>項目５</li>
</ul>
</div>