删除节点方法要注意的区别

　　　　　　　　　　删除节点方法要注意的区别

　　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等浏览器中并不认识。这样好像用处就并不大了。想了解的看这篇博文吧!