In this tutorial we will see how to Delete Last List Element with jQuery. jQuery last() method and remove() method can be used to delete the Last list item.
Table of Contents
HTML Code
HTML code is given below, in this code we have a Ul tag with four list items.
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ul>
<button>Delete</button>
JQuery Code
JQuery Code is given below, in this code jQuery last() method and remove() method are used along with jQuery selectors and ready() method and click() method.
Main two methods used are last() method and remove() method.
jQuery last() method
jQuery last() method returns the last element of the selected elements or the object.
jQuery remove() method
jQuery remove() method removes the selected element including text and node.
In this code $('#list li') is used to select all list elements, then last() method will select only Last list item and remove() method will remove it.
All this will be done on a click event of HTML button.
<script>
$(document).ready(function(){
$('button').click(function(){
$('#list li').last().remove();
});
});
</script>
Demo
Video Tutorial
Watch video tutorial on how to Delete Last List Element with jQuery.