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:
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> |
These methods work on all browsers.
Article Tags :
Recommended Articles