detach()

jQuery API の detach() は、マッチした要素を削除するメソッド。要素に関連付けられているすべてのjQueryデータは保持し続ける。

要素に関連付けられているすべてのjQueryデータも削除したい場合は、remove()を使う。

記述方法

jQuery( セレクター ) . detach();

「セレクター」に指定した要素を削除する。

記述例

jQuery( '#jquery-sample' ) . detach();

idが「jquery-sample」の要素を削除する。

実装例(サンプル)

detachとremoveの比較サンプル。

  • 項目1
  • 項目2
  • 項目3
  • 項目4
  • 項目5

  • 項目1
  • 項目2
  • 項目3
  • 項目4
  • 項目5

実装例(サンプル)の動作について

リスト項目にカーソルを合わせると、リスト項目の背景色が黄色に変わる。リスト項目からカーソルを外すと、リスト項目の背景色がピンク色に戻る。

「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>

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>

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>項目1</li>
        <li>項目2</li>
        <li>項目3</li>
        <li>項目4</li>
        <li>項目5</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>項目1</li>
        <li>項目2</li>
        <li>項目3</li>
        <li>項目4</li>
        <li>項目5</li>
    </ul>
</div>
<div style="clear: left;"></div>

スポンサード リンク

カテゴリー: API, DOM削除, DOM操作, JavaScript, jQuery タグ: パーマリンク