如何从 jQuery 对象中永久删除一个元素

Question

这里有一个问题。

我有这样的代码，它可以将所有的li元素收集到jQuery集合中，然后从DOM中删除最后一个。但是我不知道如何从jQuery集合中删除元素？

现在代码大致如下：

 console.log(myList);
['li.item', 'li.item', 'li.item']

我需要弹出最后一个项目并得到类似这样的结果：

console.log(myList);
['li.item', 'li.item']

var myList = $('.item');

console.log(myList);

myList.last().remove();

console.log(myList);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="item"><a href="#">Item</a></li>
  <li class="item"><a href="#">Item</a></li>
  <li class="item"><a href="#">Item</a></li>
<ul>

- vedran

---

您只需要使用该选择器创建一个新的jQuery对象，就可以获得当前元素列表。 - Guffa

使用splice或pop很容易。但如何在集合更新时删除项目 - 这是一个有趣的问题。 - dfsq

Answer 1

为了从jQuery对象中删除一个元素，您可以使用.splice()方法。

要删除最后一个元素：

myList.splice(-1);

移除第一个元素：

myList.splice(0, 1);

需要知道的是，返回值是一个HTMLElement元素。如果您想对其进行操作，则需要将其再次转换为jQuery元素。

---

不幸的是，默认情况下，jQuery没有pop或shift方法。但是，您可以使用以下方法轻松创建这些方法：

$.fn.pop = function(){
    return $(this.splice(-1));
}

$.fn.shift = function(){
    return $(this.splice(0,1));
}

然后调用：

myList.pop();
myList.shift();

如果您想在DOM和对象中删除内容，可以使用连接删除函数：

---

如果您想要在DOM和对象中移除元素，可以链式调用remove函数:

myList.pop().remove();
myList.shift().remove();
$(myList.splice(0, 1)).remove();
$(myList.splice(-1)).remove();

- Karl-André Gagnon

Answer 2

你可以使用 .slice 来选择 jQuery 对象中的特定缓存项，但更新原始缓存元素有点棘手。我使用了 .not 函数来过滤掉已删除的元素。

//read as numbered for better understanding
myList = myList.not( // 3. Use .not to remove the Last element from the 
                     //    cached selector
             myList.slice(-1) // 1. Select Last element using .slice(-1)
                .remove()     // 2. Remove Last element
              );

var myList = $('.item');
console.log(myList);
myList = myList.not(myList.slice(-1).remove());
console.log(myList.css('color', 'red'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="item"><a href="#">Item 1</a></li>
  <li class="item"><a href="#">Item 2</a></li>
  <li class="item"><a href="#">Item 3</a></li>
<ul>

- Selvakumar Arumugam

Answer 3

问题在于$.fn.remove在从DOM中移除元素后，不会更新集合元素和length属性。因此，集合与实际的DOM不同步。然而，您可以使用jQuery的remove方法和本地JavaScript的pop或splice的组合。这样做可以非常简洁：

$([].pop.call(myList)).remove();

请查看下面的演示。

var myList = $('.item');

alert(myList.length);

$([].pop.call(myList)).remove()

alert(myList.length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="item"><a href="#">Item 1</a></li>
  <li class="item"><a href="#">Item 2</a></li>
  <li class="item"><a href="#">Item 3</a></li>
<ul>

- dfsq

---

太棒了，加一分。其他答案甚至都不接近。 - Selvakumar Arumugam

@Vega，由于我是“其他答案”的一部分，您能告诉我我的错误在哪里吗？这将帮助我理解我的错误。 - Karl-André Gagnon

@Karl-AndréGagnon，非常抱歉，我没有在谈论错误。这个答案比其他答案（包括我的）更优雅。 - Selvakumar Arumugam

我被告知了关于去同步化的问题，所以在一个DOM元素没有被移除的例子中，我能否只是向集合中添加一些变量（而不是实际的DOM元素），以便稍后检索它？我真的很想更新在foreach循环中运行的集合/集合，以便标记的项目不再通过each()运行。 - sergio