jQuery DOM ノードの...LOGIN

jQuery DOM ノードの削除

Remove は empty と同様に要素を削除するメソッドですが、remove は要素自体と要素内のすべてのもの (バインドされたイベントや要素に関連する jQuery データを含む) を削除します。

たとえば、ノードの場合、クリック イベントをバインドします

<div class="hello">
    <p>php中文网</p>
</div>
$('.hello').on("click",fn)

実際には、remove メソッドを使用せずにこのノードを削除するのは非常に簡単ですが、同時にイベントを破棄する必要があります。これは、「メモリ」を防ぐためです。リーク」が発生するため、フロントエンド開発者は関連付けられているイベントの数に注意する必要があります。使用しないときは忘れずに破棄してください

remove メソッドを使用して div とその中のすべての要素を削除します。イベント破棄メソッドは自動的に操作されます。 Remove 内にあるため、使い方は非常に簡単です

//通过remove处理
$('.hello').remove()
//结果:<div class="hello"><p>php中文网</p></div> 全部被移除
//节点不存在了,同事事件也会被销毁

remove 式パラメータ:

空よりも Remove の利点は、削除する一致する要素のセットをフィルタリングするセレクター式を渡すことができ、選択的に削除できることです。指定したノード

$() を使用して同じ要素のグループを選択し、remove() を通してフィルタリング ルールを渡すことで、このように処理できます

右側のコード領域と比較すると、このように処理できます

$("p").filter(":contains('3')").remove()

以下にサンプルコードを書いてみましょう、友達、それがどのようなものになるかを見てみましょう

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    .test1 {
        background: #bbffaa;
    }
    
    .test2 {
        background: yellow;
    }
    </style>
</head>

<body>
    <h2>通过jQuery remove方法移除元素</h2>
    <div class="test1">
        <p>p元素1</p>
        <p>p元素2</p>
    </div>
    <div class="test2">
        <p>p元素3</p>
        <p>p元素4</p>
    </div>
    <button>点击通过jQuery的empty移除元素</button>
    <button>点击通过jQuery的empty移除指定元素</button>
    <script type="text/javascript">
    $("button:first").on('click', function() {
        //删除整个 class=test1的div节点
        $(".test1").remove()
    })

    $("button:last").on('click', function() {
        //找到所有p元素中,包含了3的元素
        //这个也是一个过滤器的处理
        $("p").remove(":contains('3')")
    })
    </script>
</body>

</html>


次のセクション
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <style> .test1 { background: #bbffaa; } .test2 { background: yellow; } </style> </head> <body> <h2>通过jQuery remove方法移除元素</h2> <div class="test1"> <p>p元素1</p> <p>p元素2</p> </div> <div class="test2"> <p>p元素3</p> <p>p元素4</p> </div> <button>点击通过jQuery的empty移除元素</button> <button>点击通过jQuery的empty移除指定元素</button> <script type="text/javascript"> $("button:first").on('click', function() { //删除整个 class=test1的div节点 $(".test1").remove() }) $("button:last").on('click', function() { //找到所有p元素中,包含了3的元素 //这个也是一个过滤器的处理 $("p").remove(":contains('3')") }) </script> </body> </html>
コースウェア