remove( selector )

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

要素に関連付けられているjQueryデータを保持させておきたい場合は、detach( selector )を使う。

detach()のページに、removeとdetachの比較サンプルがある。

記述方法

jQuery( セレクター1 ) . remove( セレクター2 );

「セレクター1」及び「セレクター2」の両方にマッチする要素を削除する。

記述例

jQuery( '.jquery-sample' ) . remove( ':contains("サンプル")' );

クラス名が「jquery-sample」で、尚且つ、コンテンツに「サンプル」を含む要素を削除する。

実装例(サンプル)

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

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

「項目2を削除」ボタンをクリックすると、項目2を削除する。

「項目4を削除」ボタンをクリックすると、項目4を削除する。

実装例(サンプル)のソースコード

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( '#jquery-sample-remove-button-2' ) . click( function () {
        jQuery( '#jquery-sample-remove-ul li' ) . remove( ':contains("2")' );
    } );
    jQuery( '#jquery-sample-remove-button-4' ) . click( function () {
        jQuery( '#jquery-sample-remove-ul li' ) . remove( ':contains("4")' );
    } );
} );
// -->
</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>

HTML

<div id="jquery-sample-remove">
    <p>
        <button id="jquery-sample-remove-button-2">項目2を削除</button>
        <button id="jquery-sample-remove-button-4">項目4を削除</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>

スポンサード リンク

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