How to clear all options in a dropdown box?
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() {
document.getElementById( "guardian" ).innerHTML =
null ;
}
</script>
</body>
</html>
|
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() {
document.querySelectorAll(
'#guardian' ).forEach(guardian => guardian.remove())
}
</script>
</body>
</html>
|
Output:
These methods work on all browsers.
Last Updated :
27 Sep, 2019
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...