Introduction: Here in this article I am going to explain how to remove first,
last or selected item from the select element i.e. dropdownlist using
jQuery.
In previous articles I have explained How to remove item by value or text or index from select option(dropdown) and Remove multiple or all items from dropdown and Jquery to show image preview after validating image size and type before upload in asp.net and Slide up down div content based on asp.net checkbox check uncheck using jquery and Difference between .empty() and .remove jquery methods with examples
Description: jQuery provides some interesting methods that would help remove items (options) from dropdown. We can remove all items, multiple items or remove specific (single) item, remove all except first, remove all except last, remove all except one, remove first item, remove last item, remove selected item, remove item by item text/value/index as per requirement.
Description: jQuery provides some interesting methods that would help remove items (options) from dropdown. We can remove all items, multiple items or remove specific (single) item, remove all except first, remove all except last, remove all except one, remove first item, remove last item, remove selected item, remove item by item text/value/index as per requirement.
But here in this article I am going to demonstrate how to remove
selected or first or last item from dropdown using jQuery.
Implementation: Let's understand by suitable examples:
<html>
<head>
<title>Examples to remove first, last or
selected item from dropdown.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#btnRemoveFirst").click(function () {
$('#ddlItems option:first').remove();
});
$("#btnRemoveLast").click(function () {
$('#ddlItems option:last').remove();
});
$("#btnRemoveSelected").click(function () {
$("#ddlItems option:selected").remove();
});
});
</script>
</head>
<body>
<select id="ddlItems" style='width:240px;'>
<option value="1">Item1</option>
<option value="2">Item2</option>
<option value="3">Item3</option>
<option value="4">Item4</option>
<option value="5">Item5</option>
</select><br /><br />
<input type="submit" id="btnRemoveFirst" value="Remove first item"/>
<br />
<input type="submit" id="btnRemoveLast" value="Remove last item"/>
<br />
<input type="submit" id="btnRemoveSelected" value="Remove selected item"/>
</body>
</html>
Note: Refresh page after clicking any button to re-populate items in dropdown that might be deleted due to any of the other button click.
Explanation:
If we want to remove the selected item from dropdown then
we can use $("#ddlItems option:selected").remove(); Here we have
picked the selected item to delete.
If we want to remove the very first item then we can
use $('#ddlItems option:first').remove(); Here we have just picked the first
item to delete among other items.
If we want to remove the last item then we can use
$('#ddlItems option:last').remove(); Here we have just picked the last item to
delete among other items.
Now over to you:
A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates.
If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..