从jQuery对象中删除DOM元素

Question

jQuery使从DOM中删除节点变得容易。但是如何从给定的jQuery对象中删除DOM元素呢？

- Will Peavy

---

你试图移除什么类型的东西？ - acrosman

@acrosman - 没有特别的原因，我只是想更多地了解jQuery的工作原理。jQuery网站上有关于API的良好文档，但除了查看源代码之外，我没有看到太多关于jQuery对象内部工作原理的文档。 - Will Peavy

Answer 1

如果你想从jQuery对象中删除节点，请使用filter或not函数。更多信息请参见此处。

如何使用filter：

var ps = $('p');

//Removes all elements from the set of matched elements that do 
//not match the specified function.
ps = ps.filter(function() {
  //return true to keep it, false to discard it
  //the logic is up to you.
});

或者

var ps = $('p');

//Removes all elements from the set of matched elements that 
//do not match the specified expression(s).
ps = ps.filter('.selector');

如何使用 not：

var ps = $('p');

//Removes elements matching the specified expression 
//from the set of matched elements.
ps = ps.not('.selector'); 

- geowa4

---

@geowa4 - 感谢您的回复。您知道filter()是否会全局地从对象中删除节点，还是仅在其函数内部本地删除？ - Will Peavy

有一件让我困惑的事情是，除非重新分配，否则它实际上不会从缓存的选择器中删除任何内容。因此，您需要使用ps = ps.filter(function() { //stuff }); - SimplGy

Answer 2

如前所述，$.filter() 是过滤数据的绝佳选择。请注意，jQuery 对象可以像数组一样处理，因此，您可以在其上使用 splice() 等数组方法。

var people = $(".people");
people.splice(2,1); // Remove 1 item starting from index 2

- Sampson

---

@geowa4：阅读http://www.learningjquery.com/2008/12/peeling-away-the-jquery-wrapper - Sampson

@Jonathan：你看了吗？因为它根本没有说它是一个数组。你可以得到一个，当然，jQuery在某些方面可以像数组一样运作。但它仍然不是一个数组——这是一个重要的区别。事实上，正如我在第一条评论中所指出的那样，很少有数组函数适用于jQuery对象。 - geowa4

@Jonathan：没问题。通常我对措辞并不挑剔，但这是一个常见的错误，会导致很多人花费大量时间苦思冥想。 - geowa4

那么 .remove() 呢？ - ManirajSS

@ManirajSS .remove()方法会将元素从页面中移除，同时删除任何相关的HTML、事件等（还有detach()方法，它可以将元素从页面中移除，但仍然保留在内存中，并保留事件）。这个问题是关于如何保持jQuery元素，但将其从特定的jQuery对象中移除。 - user56reinstatemonica8

Answer 3

<ul>
    <li class="1" />
    <li class="2" />
    <li class="3" />
    <li class="4" />
    <li class="5" />
</ul>

筛选器遍历 jQuery 对象集合。对于每个元素：在 filter() 中返回 true 以保留 jQuery 对象集合中的当前项目。返回 false 以从 jQuery 对象集合中删除当前对象。

$("li").filter(function ()
{
    if (this.className == "1" || this.className == "2") return true;

    return false;
});

在这种情况下，由filter()执行的匿名函数将返回对具有类1和/或2的列表项为真，从而从jQuery对象集合中删除最后三个列表项。


一个实际例子：

<ul>
    <li class="1" />
    <li class="2" />
    <li class="3" />
    <li class="4" />
    <li class="5" />
</ul>

这段代码将一个类名("blue")添加到无序列表中。然后高亮显示前两个列表项。然后将点击处理程序附加到前两个列表项：

$(function ()
{
    $("ul").addClass("blue").find("li").filter(function ()
    {        
        if (this.className == "1" || this.className == "2") return true;

        return false;

    }).addClass("highlight").click(function ()
    {
        alert("I am highlighted!");
    });
});

- cllpse