jQuery API の detach() は、マッチした要素を削除するメソッド。要素に関連付けられているすべてのjQueryデータは保持し続ける。
要素に関連付けられているすべてのjQueryデータも削除したい場合は、remove()を使う。
記述方法
jQuery( セレクター ) . detach();
「セレクター」に指定した要素を削除する。
記述例
jQuery( '#jquery-sample' ) . detach();
idが「jquery-sample」の要素を削除する。
実装例（サンプル）
detachとremoveの比較サンプル。
- 項目１
- 項目２
- 項目３
- 項目４
- 項目５
- 項目１
- 項目２
- 項目３
- 項目４
- 項目５
実装例（サンプル）の動作について
リスト項目にカーソルを合わせると、リスト項目の背景色が黄色に変わる。リスト項目からカーソルを外すと、リスト項目の背景色がピンク色に戻る。
「detach」ボタンをクリックすると、リスト項目がフェードアウト、フェードインする。リスト項目にカーソルを合わせると、リスト項目の背景色が黄色に変わる。リスト項目からカーソルを外すと、リスト項目の背景色がピンク色に戻る。
「remove」ボタンをクリックすると、リスト項目がフェードアウト、フェードインする。リスト項目にカーソルを合わせても、リスト項目の背景色は変わらなくなる。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-detach-ul li, #jquery-sample-remove-ul li' ) . hover(
function () {
jQuery( this ) . css( 'backgroundColor', 'yellow' );
},
function () {
jQuery( this ) . css( 'backgroundColor', 'pink' );
}
);
jQuery( '#jquery-sample-detach-button' ) . click( function () {
jQuery( '#jquery-sample-detach-ul li' ) . detach() . fadeOut() . fadeIn() . appendTo( '#jquery-sample-detach-ul' );
} );
jQuery( '#jquery-sample-remove-button' ) . click( function () {
jQuery( '#jquery-sample-remove-ul li' ) . remove() . fadeOut() . fadeIn() . appendTo( '#jquery-sample-remove-ul' );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-detach-ul li, #jquery-sample-remove-ul li' ) . hover(
function () {
jQuery( this ) . css( 'backgroundColor', 'yellow' );
},
function () {
jQuery( this ) . css( 'backgroundColor', 'pink' );
}
);
jQuery( '#jquery-sample-detach-button' ) . click( function () {
jQuery( '#jquery-sample-detach-ul li' ) . detach() . fadeOut() . fadeIn() . appendTo( '#jquery-sample-detach-ul' );
} );
jQuery( '#jquery-sample-remove-button' ) . click( function () {
jQuery( '#jquery-sample-remove-ul li' ) . remove() . fadeOut() . fadeIn() . appendTo( '#jquery-sample-remove-ul' );
} );
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-sample-detach,
#jquery-sample-remove {
float: left;
width: 250px;
margin: 10px;
padding: 20px;
background-color: pink;
border: 1px solid gray;
border-radius: 10px;
}
-->
</style>
<!--
#jquery-sample-detach,
#jquery-sample-remove {
float: left;
width: 250px;
margin: 10px;
padding: 20px;
background-color: pink;
border: 1px solid gray;
border-radius: 10px;
}
-->
</style>
HTML
<p>detachとremoveの比較サンプル。</p>
<div id="jquery-sample-detach">
<p>
<button id="jquery-sample-detach-button">detach</button>
</p>
<ul id="jquery-sample-detach-ul">
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
<li>項目４</li>
<li>項目５</li>
</ul>
</div>
<div id="jquery-sample-remove">
<p>
<button id="jquery-sample-remove-button">remove</button>
</p>
<ul id="jquery-sample-remove-ul">
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
<li>項目４</li>
<li>項目５</li>
</ul>
</div>
<div style="clear: left;"></div>
<div id="jquery-sample-detach">
<p>
<button id="jquery-sample-detach-button">detach</button>
</p>
<ul id="jquery-sample-detach-ul">
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
<li>項目４</li>
<li>項目５</li>
</ul>
</div>
<div id="jquery-sample-remove">
<p>
<button id="jquery-sample-remove-button">remove</button>
</p>
<ul id="jquery-sample-remove-ul">
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
<li>項目４</li>
<li>項目５</li>
</ul>
</div>
<div style="clear: left;"></div>