刪除節點方法要注意的區別

　　JQ提供的三個方法

　　　　如果文檔中某一個元素多余，那么應該將其刪除。jQuery提供了三種刪除節點的方法。remove(),detach(),empty(),接下來，我們就進行一一介紹。

　　　　1.remove()方法

　　　　　　作用是從DOM中刪除所有匹配的元素，傳入的參數用於根據jQuery表達式來篩選元素。測試HTML代碼如下：

<ul>
    <li title="one">First li element</li>
    <li title="two">
        Second li element
        <ol>
            <li>li element of ol</li>
        </ol>
    </li> 
    <li>
        Third li element
        <dl>
            <dt>dt element of dl</dt>
            <dd>dd element of dd</dd>
        </dl>     
    </li>
</ul>    

　　　　　　事先給ul的第二個li添加點擊事件: 

$('ul > li:eq(1)').click(function() {   alert('onclick')  });

　　　　　　然后首先使用remove()方法進行測試，測試代碼如下：

//remove()方法
// 首先聲明一個變量，來存儲被刪除元素的引用
var removeObj = null;
// 刪除第二個li,並返回被刪除元素的引用
$('button:eq(0)').click(function() {
    removeObj = $('ul > li:eq(1)').remove();
});
// 被刪除元素重新添加到ul中
$('button:eq(1)').click(function() {
    $('ul').append(removeObj);
});
// 刪除li元素title屬性為"three"的
$('button:eq(2)').click(function() {
    $('ul > li').remove('li[title="three"]');
});

　　　　　　依次點擊第一，二，三個按鈕，依次執行上面程序后，結果如圖：

                  

　　　　　　當某個節點使用remove()方法后，該節點以及所包含的所有后代節點將同時被刪除。(圖1)。這個方法的返回值是一個指向已被刪除的節點的引用，因此可以在以后再使用這些元素。(圖2)。最后還可以通過傳遞參數來選擇性地刪除元素。(圖3)。特別要指出的一點是： 當使用被刪除節點的引用重新添加元素到文檔中時，處了這個元素本身得以保留外，其他的比如綁定的事件，附加的數據等都會被移除。所有添加回文檔中后，點擊次元素，並不會彈出"onclick"，即綁定的事件沒有保留。

　　　　2. detach()方法

　　　　　　detach()和remove()一樣，也是從DOM中去掉所有匹配的元素。但是需要注意的是這個方法也不會把匹配的元素從JQuery對象中刪除，因而可以在將來再使用這些匹配的元素。與remove()唯一不同的是所有綁定的事件，附加的數據等都會保留下來。

// detach() 方法
var detachObj = null;
// 刪除第二個li元素
$('button:eq(3)').click(function() {
    detachObj = $('ul > li:eq(1)').detach();
});
// 重新添加到文檔中
$('button:eq(4)').click(function() {
    // 注意： 添加成功后，點擊次元素會彈出"onclick",確實保留了綁定事件
    $('ul').append(detachObj);
});

　　　　3. empty()方法

　　　　　　嚴格來說, empty()方法並不是刪除節點，而是清空節點，它能清空元素中的所有后代節點。jQuery代碼如下：

$('button:eq(5)').click(function() {
    //注： empty()方法不接受參數
    $('ul > li:eq(1)').empty();
});

　　　　　　點擊按鈕后，如圖                         

　　　　　　我們發現第二個li元素的內容被清空了，只剩下空的li標簽。因此特別注意是元素里面的內容哦。

　　HTML DOM remove(),removeChild()

　　　　印象中在DOM中除了removeChild()方法，貌似好像也有remove(), removeNode()方法，故查找下了資料。先說說removeChild()方法吧。

　　　　removeChild()

　　　　　　定義: 刪除指定元素的某個指定的子節點。語法： node.removeChild(node); 參數node為被刪除的節點，以Node對象返回被刪除的節點，如果節點不存在則返回null。

　　　　　　removeChild()會刪除選中元素本身以及所有的后代元素。就不貼代碼了，感興趣的朋友可以親測。

　　　　remove()

　　　　　　查了w3cSchool，里面確實有remove()方法，不過使用這個方法有很大的局限性。

　　　　　　定義： 用於從下列列表刪除選項。  語法： selectObject.remove(index); 參數index是必需的，為要刪除的選項的索引號。

　　　　　　測試了下，如果參數不是規定的索引號，那么默認是刪除索引號為0的選項（即第一個選項）。 感興趣的移步w3cschool

　　　　removeNode()

　　　　　　在核心JS中沒有這個方法，但是在IE中有這樣的方法，但是在FF等瀏覽器中並不認識。這樣好像用處就並不大了。想了解的看這篇博文吧!