here is the problem.

I have code like this where I get all li elements into a jQuery collection and then I remove last item from DOM. But I don't know how to also remove an element from a jQuery collection?

Now it's something like this:

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

I need to pop last item and get something like this:

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

var myList = $('.item');

console.log(myList);

myList.last().remove();

console.log(myList);

<script src=".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>

here is the problem.

I have code like this where I get all li elements into a jQuery collection and then I remove last item from DOM. But I don't know how to also remove an element from a jQuery collection?

Now it's something like this:

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

I need to pop last item and get something like this:

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

var myList = $('.item');

console.log(myList);

myList.last().remove();

console.log(myList);

<script src="https://ajax.googleapis./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>

• javascript
• jquery
• html

• You can just create a new jQuery object with that selector to get a current list of elements. – Guffa Commented Dec 4, 2014 at 21:27
• It's easy to use splice or pop. But the question how to remove item with collection getting updated - is an interesting question. – dfsq Commented Dec 4, 2014 at 21:31

3 Answers 3

To remove an element in the jQuery object, you can use .splice().

To remove the last element :

myList.splice(-1);

To remove the first element :

myList.splice(0, 1);

It is important to know that the returned value is an HTMLElement. If you wanna do something with it, you need to convert it into a jQuery element again.

Unfortunatly, jQuery doesnt have pop or shift by default. But you can easily create those methods with that :

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

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

Then call:

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

If you want to remove in the DOM and in the object, you can chain the remove function :

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

The problem is that $.fn.remove doesn't update collection elements and length property after it removes elements from DOM. As the result collection bees desynchronized with actual DOM. What you can do however is to use bination of jQuery's remove method and native javascript pop or splice. It can be pretty concise:

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

Check the demo below.

var myList = $('.item');

alert(myList.length);

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

alert(myList.length);

<script src="https://ajax.googleapis./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>

You can use .slice to select a specific cached item from the jQuery object, but it is little tricky to update the original cached element. I used .not function to filter out the removed element from the cached selector.

Explanation:

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