Open In App

How to clear all options in a dropdown box?

Improve
Improve
Like Article
Like
Save
Share
Report

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:




<!DOCTYPE html>
<html>
  
<body>
  
    <p>Which character is your favorite guardian?</p>
      
        <select id="guardian">
            <!--dropdown list with id=guardian-->
            <option>Guardians</option>
            <option>Quill</option>
            <option>Gamora</option>
            <option>Drax</option>
            <option>rocket</option>
            <option>groot</option>
            <option>mantis</option>
        </select>
  
        <input type="button" onclick="myFunction()"
               value="Only IronMan clear them all" />
        <!––Button which avokes myFuction()-->
  
        <script>
            function myFunction() {
                //clears all the guardians with the specified id
                document.getElementById("guardian").innerHTML =
                    null;
            }
        </script>
</body>
  
</html>


Output:
output
output

Approach 2:
This process not only removes the option but also removes the dropdown box too.
Check out the code:




<html>
  
<body>
  
    <p>Which character is your favorite guardian?</p>
  
    <select id="guardian">
        <!--dropdown list with id=guardian-->
        <option>Guardians</option>
        <option>Quill</option>
        <option>Gamora</option>
        <option>Drax</option>
        <option>rocket</option>
        <option>groot</option>
        <option>mantis</option>
    </select>
  
    <input type="button" 
           onclick="myFunction()" 
           value="Only IronMan clear them all">
    <!––Button which avokes myFuction()-->
  
    <script>
        function myFunction() {
            //process the options in a loop and removes them
            document.querySelectorAll(
              '#guardian').forEach(guardian => guardian.remove())
                //here, guardian inside the for is a variable not id.
        }
    </script>
</body>
  
</html>


Output:
output
output

These methods work on all browsers.



Last Updated : 27 Sep, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads