How to permanently remove an element from a jQuery object
here is the problem.
I have a code like this where I get all li elements in a jQuery collection and then remove the last element from the DOM. But I don't know how to remove an item from a jQuery collection?
Now it goes something like this:
console.log(myList);
['li.item', 'li.item', 'li.item']
I need to output the last element 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.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>
source to share
To remove an element in a jQuery object you can use .splice()
.
To remove the last item:
myList.splice(-1);
To remove the first item:
myList.splice(0, 1);
It is important to know that the return value is HTMLElement. If you want to do something about it, you need to convert it to a jQuery element again.
Unfortunately jQuery doesn't have pop
or by default shift
. But you can create these methods easily with this:
$.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 delete in the DOM and in the object, you can chain the delete function:
myList.pop().remove();
myList.shift().remove();
$(myList.splice(0, 1)).remove();
$(myList.splice(-1)).remove();
source to share
The problem is that it $.fn.remove
doesn't update the collection elements and property length
after the elements are removed from the DOM. As the collection of results desynchronizes with the actual DOM. However, you can use a combination of jQuery method remove
and native javascript pop
or splice
. This can be pretty short:
$([].pop.call(myList)).remove();
Check out the demo below.
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>
source to share
You can use .slice
to select a specific cached object from a jQuery object, but it's a bit tricky to update the original cached element.I used a function .not
to filter the deleted 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.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>
source to share