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()都支持選擇器表達

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