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
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
Video Tutorial
Watch video tutorial on how to Delete First List Element with jQuery.