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比empty好用的地方就是可以傳遞一個選擇器表達式用來過濾將被移除的匹配元素集合,可以選擇性的刪除指定的節點

我們可以透過$()選擇一組相同的元素,然後透過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>
章節課件