DOM——節(jié)點(diǎn)刪除.empty()、remove()和.detach()

      節(jié)點(diǎn)刪除.empty()、remove()和.detach()

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

2   通過(guò)empty方法移除里面div的所有元素，只是清空內(nèi)部的html代碼，但是標(biāo)記仍然留在DOM中，如//通過(guò)empty處理

                               $('.hello').empty()

                               //結(jié)果：<p>慕課網(wǎng)</p>被移除

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

3   remove會(huì)將元素自身移除，也會(huì)移除元素內(nèi)部的一切，包括綁定的事件及與該元素相關(guān)的JQuery數(shù)據(jù)，如<div class="hello"><p>慕課網(wǎng)</p></div>

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

4   如果不通過(guò)remove方法刪除這個(gè)節(jié)點(diǎn)，但是同時(shí)需要把事件給銷(xiāo)毀掉，是為了防止內(nèi)存泄漏，所以在前端開(kāi)發(fā)中綁了多少事件，不用的時(shí)候一定要記得銷(xiāo)毀

5   通過(guò)remove方法移除div及其內(nèi)部所有元素，remove內(nèi)部會(huì)自動(dòng)操作事件銷(xiāo)毀方法，如//通過(guò)remove處理

             $('.hello').remove()

             //結(jié)果：<div class="hello"><p>慕課網(wǎng)</p></div>全部被移除

            //節(jié)點(diǎn)不存在了，同時(shí)事件也會(huì)被銷(xiāo)毀

6   remove表達(dá)式參數(shù)

   remove比empty更好用的是可以傳遞一個(gè)選擇器表達(dá)式用來(lái)過(guò)濾將被移除的匹配元素集合，可以選擇性的刪除指定的節(jié)點(diǎn)

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

8   empty()和remove()的區(qū)別

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

   remove()該節(jié)點(diǎn)與包含的所有后代節(jié)點(diǎn)將同時(shí)被刪除，提供傳遞一個(gè)篩選的表達(dá)式，刪除置頂和集中的元素

9   detach()臨時(shí)刪除頁(yè)面上的節(jié)點(diǎn)，不讓節(jié)點(diǎn)上的數(shù)據(jù)和事件丟失，能在下一個(gè)時(shí)間段讓這個(gè)刪除的節(jié)點(diǎn)顯示到頁(yè)面，即從當(dāng)前頁(yè)面中移除該元素，但保留這個(gè)元素的內(nèi)存模型對(duì)象，如$("p").detach()

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

   .remove()事件及數(shù)據(jù)會(huì)被刪除

   .detach()所有綁定的事件、附加的數(shù)據(jù)等都會(huì)保留下來(lái)

11   .remove()和.detach()的共同點(diǎn)

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

   有參數(shù)時(shí)移除篩選出的節(jié)點(diǎn)及該節(jié)點(diǎn)的內(nèi)部的所有節(jié)點(diǎn)，包括節(jié)點(diǎn)上事件與數(shù)據(jù)，無(wú)參數(shù)時(shí)移除自身整個(gè)節(jié)點(diǎn)及該節(jié)點(diǎn)的內(nèi)部的所有節(jié)點(diǎn)，包括節(jié)點(diǎn)上事件與數(shù)據(jù)