jQuery to remove multiple or all items from select option(dropdown)

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. 
jQuery to remove multiple or all elements / items from select option(dropdown)

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.
Previous
Next Post »

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..