Introduction: Here in this article I am going to explain
how to remove all items from the dropdown except the first item, last item or
any one as per requirement 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 dropdown and Remove first, last or selected item from dropdown and Remove multiple or all items from dropdown and Auto resize textarea or asp.net multiline textbox based on content using javascript and Difference between .empty() and .remove jquery methods with examples
In previous articles I have explained How to Remove item by value or text or index from dropdown and Remove first, last or selected item from dropdown and Remove multiple or all items from dropdown and Auto resize textarea or asp.net multiline textbox based on content using javascript 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 the
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 all items except first or last or any one item from dropdown using
jQuery.
Implementation: Let's understand by suitable examples:
<html>
<head>
<title>Examples to remove all first or 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 () {
$("#btnRemoveAllExceptFirst").click(function () {
$('#ddlItems option:not(:first)').remove();
});
$("#btnRemoveAllExceptLast").click(function () {
$('#ddlItems option:not(:last)').remove();
});
$("#btnRemoveAllExceptOne").click(function () {
$('#ddlItems option[value!="2"]').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="btnRemoveAllExceptFirst" value="Remove all except First" />
<br />
<input type="submit" id="btnRemoveAllExceptLast" value="Remove all except Last" />
<br />
<input type="submit" id="btnRemoveAllExceptOne" value="Remove All except One" />
</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 all items from dropdown except
the first item then we can use $('#ddlItems option:not(:first)').remove(); Here
we have excluded first item from being deleted.
If we want to remove all items from dropdown except
the last item then we can use $('#ddlItems option:not(:last)').remove(); Here
we have excluded last item from being deleted.
If we want to remove all items from dropdown except
the one we specify e.g Item2 then we can use $('#ddlItems option[value!="2"]').remove(); Here we have excluded one item
i.e Item2 whose value is 2 from being
deleted.
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..