Introduction: Here in this article I am going to explain how to remove dropdown item by value or by text or by index using jQuery's method remove(). I have also mentioned the ways to select items to remove.
In previous articles I have explained How to Remove first, last or selected item from dropdown and Remove item by value or text or index from dropdown and Select all text in asp.net and html textbox on click or focus using jQuery and Add textbox search functionality in checkboxlist 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 either 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 or by value or by index as per requirement.
If we want to remove any item from dropdown by its text then we can use jQuery's contains() method to find the item by text and remove as $("#ddlItems option:contains('Item3')").remove(); Here we have picked the item to delete whose text is Item3
If we want to remove any item from dropdown by its index then we can use $('#ddlItems option:eq(' + index + ')').remove(); Here we have picked the item to delete whose index we specify e.g 3. Note: index value starts with 0; so index 3 will remove Item4.
Now over to you:
Description: jQuery provides some interesting methods that would help remove items (options) from dropdown. We can either 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 or by value or by index as per requirement.
But here in this article i am going to demonstrate
how to remove item by value or by text or by index from dropdown using jQuery.
Implementation: Let's understand by suitable examples:
<html>
<head>
<title>Examples to remove item by text or by
value or by index from dropdown.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#btn1").click(function () {
$('#ddlItems option[value="4"]').remove();
});
$("#btn2").click(function () {
$("#ddlItems
option:contains('Item4')").remove();
});
$("#btn3").click(function () {
var index = 3;
$('#ddlItems option:eq(' + index + ')').remove();
});
});
</script>
</head>
<body>
<select id="ddlItems" style='width:200px;'>
<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="btn1" value="Remove item by value" /><br />
<input type="submit" id="btn2" value="Remove item by text" /><br />
<input type="submit" id="btn3" value="Remove item by index" />
</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 any item from dropdown by its
value then we can use $('#ddlItems option[value="4"]').remove(); Here
we have picked the item to delete whose value is 4
If we want to remove any item from dropdown by its text then we can use jQuery's contains() method to find the item by text and remove as $("#ddlItems option:contains('Item3')").remove(); Here we have picked the item to delete whose text is Item3
If we want to remove any item from dropdown by its index then we can use $('#ddlItems option:eq(' + index + ')').remove(); Here we have picked the item to delete whose index we specify e.g 3. Note: index value starts with 0; so index 3 will remove Item4.
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..