In this tutorial we will learn how to Remove First Option from Select tag with jQuery. We can use jQuery first() method or jQuery :first Selector along with remove() method to select and remove first option of select tag.
Table of Contents
jQuery first() method
jQuery first() method returns the first element inside the selected HTML element.
In this example we can use first() method to get the first option of select tag.
jQuery :first selector
jQuery :first selector returns the first element.
In this example :first selector can also be used instead of first() method to target first option of select tag.
jQuery remove() method
jQuery remove() method removes or deletes the HTML element.
In this example remove() method is used to remove first option of select tag.
HTML Code
HTML Code is given below, in this code we have a select tag with four options and a button tag.
<!DOCTYPE html>
<html>
<head>
<title>Remove First Option from Select jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<select name="lang" id="lang">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
<option value="jquery">jQuery</option>
</select>
<button id="btn">Remove</button>
<script src="script.js"></script>
</body>
</html>
JQuery Code
JQuery Code is given below, the code is executed whenever button is clicked. This is done using jQuery click() method.
$("#lang option:first") is used to target first option of select tag.
remove() method is used to delete or remove that selected option.
<script>
$(document).ready(function()
{
$('#btn').click(function(){
$("#lang option:first").remove();
});
});
</script>
Same code with first() method
<script>
$(document).ready(function(){
$('#btn').click(function(){
$("#lang option").first().remove();
});
});
</script>
Demo
Video Tutorial
Watch video tutorial on How To Remove First Option from Select tag using jQuery.