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>

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和对象中删除，可以链接删除功能：

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

Answer 2

问题是$.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>

Answer 3

您可以使用.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
              );

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

3 个答案:

说明：