Delete Last List Element with jQuery

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
• JQuery Code
• JQuery Last() method
• JQuery remove() method
• Demo
• Video Tutorial
• More JQuery Tutorials

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

Check Demo

Video Tutorial

Watch video tutorial on how to Delete Last List Element with jQuery.