jquery中remove()與detach()的區別

說到刪除節點，立刻就會想到remove，不過原來還有一個detach，並且它們仍是有區別的，就是detach保留了jquery的數據，而remove就會徹底刪除乾淨。因此若是在刪除一個dom節點後還想保留它的數據以供使用就要用detach了。

 

jquery是一個很大強的東西，在工做中常能用到，但是有些方法仍是由於不經常使用到，或是沒有注意到而被咱們而忽略。

remove()和detach()可能就是其中的一個，可能remove()咱們用得比較多，而detach()就可能會不多了。可能我用的不夠精吧，我是一次也沒有用過。但是此次由於一個項目中一個問題，而用到它，感受頗有意思就記錄下來，與你們分享。

remove():官方的解釋是

從DOM中刪除全部匹配的元素。這個方法不會把匹配的元素從jQuery對象中刪除，於是能夠在未來再使用這些匹配的元素。但除了這個元素自己得以保留以外，其餘的好比綁定的事件，附加的數據等都會被移除。

個人理解就是將元素移除了。可是怎麼再找回來，說真的，我一直也沒有找到，哪一個朋友用過。能夠告訴我，十分感謝，

用法：

從DOM中把全部段落刪除

HTML 代碼:

　　<p>Hello</p> how are <p>you?</p>

jQuery 代碼:

　　$("p").remove();

結果:

　　how are

這個方法，很少說了，咱們主要說一下detach()這個方法，

官方描述：

從DOM中刪除全部匹配的元素。這個方法不會把匹配的元素從jQuery對象中刪除，於是能夠在未來再使用這些匹配的元素。與remove()不一樣的是，全部綁定的事件、附加的數據等都會保留下來。

描述:

從DOM中把全部段落刪除

HTML 代碼:

　<p>Hello</p> how are <p>you?</p>

jQuery 代碼:

　　$("p").detach();

結果:

　　how are

描述:

從DOM中把帶有hello類的段落刪除

HTML 代碼:

　　<p class="hello">Hello</p> how are <p>you?</p>

jQuery 代碼:

　　$("p").detach(".hello");

結果:

　　how are <p>you?</p>

咱們這麼一看，好像沒有什麼區別啊。這二個功能，哈哈。。。。我如今說一下我遇到的狀況。而後是如何解決的，你們就明白了。

我這裏有一個表單，其中有一項是 註冊碼，就是每一個信息都會有一個獨立的註冊碼，沒有註冊碼是不能註冊成功的。我用的是jquery的控件formValidator來進行驗證的，這個控件你們都用過，他是在頁面加載的時候，就開始驗證了，並且對於css中的display和jquery裏的hide()方法，它是無視的。原本呢。這是沒有問題，但是用戶卻提出了一個新的需求，就是加一個選項，用來判斷是否顯示這個註冊碼，若是不顯示，那麼就不要對註冊碼文本框進行驗證，無恥的需求。

在試用了css的display和jquery的hide()以後，我把目光放到了remove()中。它到是不驗證了，但是我選擇要驗證的時候，被移除的內容加不回來了，因此我開始找能回來了的。這時候，發現了detach()。它的有什麼好處呢。我下面放一代碼出來

var p;
        function selectChange() {
            

            if (document.getElementById("ddl_schoolarea").value != "請選擇") {

                p = $("#trlession").detach();
            }
            else {
                //table1爲一個table名字
                $("#table1").append(p);
                
            }
        }