Clearing the entire dropdown list is pretty easy, all we have to do is to create a button, which calls a function that performs the deletion.
Let’s look at the syntax of the deletion part:
document.getElementById("idofdropdownlist").innerHTML = "";
Here, it gets all the elements present in the given Id and clears then by assigning all the objects null, if not assigned to null, still object remains.
Approach 1: Check out the code:
This process not only removes the option but also removes the dropdown box too.
Check out the code:
These methods work on all browsers.
- How to style a dropdown using CSS?
- AngularJS | ng-options Directive
- How to remove arrow in dropdown in Bootstrap ?
- HTTP headers | X-Frame-Options
- How to add options to a select element using jQuery?
- AngularJS | ng-model-options Directive
- HTML | DOM Datalist options Collection
- How to open dropdown menu on hover in Bootstrap ?
- How to display div elements using Dropdown Menu in jQuery?
- How to remove options from select element using jQuery ?
- HTTP headers | X-Content-Type-Options
- How to avoid dropdown menu to close menu items on clicking inside ?
- CSS | clear Property
- What does the CSS rule “clear: both” do?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.