Introduction: Here in this article I am going to explain how to remove all or multiple options / elements / items at once from the select
element i.e. dropdownlist using jQuery.
But here in this article I am going to demonstrate how to remove multiple or all items from dropdown using remove() method provided by jQuery. We will also use jquery’s filter() method to select only specific records for removal.
In previous articles I have explained How to Remove item by value or text or index from dropdown using jquery and Remove first, last or selected item from dropdown and Limit and display number of characters left in asp.net multiline textbox using jquery and Validate asp.net 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 text or by value or by index as per requirement.
But here in this article I am going to demonstrate how to remove multiple or all items from dropdown using remove() method provided by jQuery. We will also use jquery’s filter() method to select only specific records for removal.
Implementation: Let's understand by an example:
<html>
<head>
<title>Examples to remove multiple or all items from dropdown.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#btnRemoveAll").click(function () {
$('#ddlItems')
.find('option')
.remove();
});
$("#btnRemoveMultiple").click(function () {
$('#ddlItems option').filter('[value="1"],[value="2"],[value="5"]').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="btnRemoveMultiple" value="Remove multiple items" />
<input type="submit" id="btnRemoveAll" value="Remove All" />
</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:
First we used .find() method to find the
<option> tags in the <select> element. The <option> tag
confirms that the select element has values or items in it. The second method .remove() removed all the
options in the select element.
Note: We can also use empty() method to clear all
items of dropdown as $('#ddlItems').empty(); I will explain the difference
between .empty() and .remove() method in my upcoming article.
If we want to remove multiple specified items from
dropdown then we can use jQuery's filter() method as $('#ddlItems option').filter('[value="1"],[value="2"],[value="5"]').remove();Assuming
we want to delete item with values 1,2 and 5.
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..