DOM——節點刪除.empty()、remove()和.detach()

      節點刪除.empty()、remove()和.detach()

1   empty清空方法，與刪除不一樣，只移除了指定元素中的所有子節點，不僅移除子元素（和其他后代元素），同樣移除元素里的文本，如<div class="hello"><p>慕課網</p></div>

2   通過empty方法移除里面div的所有元素，只是清空內部的html代碼，但是標記仍然留在DOM中，如//通過empty處理

                               $('.hello').empty()

                               //結果：<p>慕課網</p>被移除

                               <div class="hello"></div>

3   remove會將元素自身移除，也會移除元素內部的一切，包括綁定的事件及與該元素相關的JQuery數據，如<div class="hello"><p>慕課網</p></div>

                                         $('.hello').on("click",fn)

4   如果不通過remove方法刪除這個節點，但是同時需要把事件給銷毀掉，是為了防止內存泄漏，所以在前端開發中綁了多少事件，不用的時候一定要記得銷毀

5   通過remove方法移除div及其內部所有元素，remove內部會自動操作事件銷毀方法，如//通過remove處理

             $('.hello').remove()

             //結果：<div class="hello"><p>慕課網</p></div>全部被移除

            //節點不存在了，同時事件也會被銷毀

6   remove表達式參數

   remove比empty更好用的是可以傳遞一個選擇器表達式用來過濾將被移除的匹配元素集合，可以選擇性的刪除指定的節點

7   通過$()選擇一組相同的元素，然后通過remove()傳遞篩選的規則，如$("p").filter(":contains('3')").remove()

8   empty()和remove()的區別

   empty()不刪除節點，只是清空節點，能清空元素中的所有后代節點，但是不能刪除自己本身這個節點

   remove()該節點與包含的所有后代節點將同時被刪除，提供傳遞一個篩選的表達式，刪除置頂和集中的元素

9   detach()臨時刪除頁面上的節點，不讓節點上的數據和事件丟失，能在下一個時間段讓這個刪除的節點顯示到頁面，即從當前頁面中移除該元素，但保留這個元素的內存模型對象，如$("p").detach()

10   .remove()和.detach()的不同

   .remove()事件及數據會被刪除

   .detach()所有綁定的事件、附加的數據等都會保留下來

11   .remove()和.detach()的共同點

    .remove()和.detach()都支持選擇器表達

   有參數時移除篩選出的節點及該節點的內部的所有節點，包括節點上事件與數據，無參數時移除自身整個節點及該節點的內部的所有節點，包括節點上事件與數據