Delete First List Element with jQuery

In this tutorial we will see how to Delete First List Element with jQuery. jQuery first() method and remove() method can be used to delete the first list item.

Table of Contents

• HTML Code
• JQuery Code
• JQuery first() 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 first() method and remove() method are used along with jQuery selectors and ready() method and click() method.

Main two methods used are first() method and remove() method.

jQuery first() method

jQuery first() method returns the first 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 first() method will select only first 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').first().remove(); 
    });
});
</script>

Demo

Check Demo

Video Tutorial

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