How to remove options from a dropdown list with JavaScript?

Javascript Web Development Front End Technology

This tutorial teaches us how to remove the options from a dropdown list using JavaScript. Usually, this is not frequent that users get the option to remove any option from the dropdown list but this is possible if the option is provided by the programmer.

If the programmer wants to provide the option to remove the dropdown then in JavaScript it is possible with the help of the remove() method. Using the DOM user can select the option to remove and by providing a function it could be passed to the remove method which will remove it. Let’s look into detail and understand the whole process.

Syntax

Syntax of the remove() method is −

var element = document.getElementById( "selectNow" );
element.remove( element.selectedIndex );

In the above syntax, “selectNow” is the id of the dropdown list in which the options are defined. We have used the ‘getElementById’ method of the DOM to get the dropdown list and stored that in a variable.

After that by using the function remove() we deleted ‘selectedIndex’ element by passing it as remove() function’s parameter. Also, ‘selectedIndex’ will return the option we want to delete and we have to select it before deleting it.

Note − ‘selectedIndex’ is the predefined method that will return the value of the index which is selected by the user.

Algorithm

We have seen the syntax for removing an option from the list, let’s see the complete algorithm step by step to understand it in a better way −

Creating form or dropdown menu

In these steps, we will create the form in which we will define or create the dropdown and a button that will call the function to delete the object from the dropdown list.

Initially, we have to create a form using the <form> tag which will contain our dropdown list.
We will use the <select> tag to create a list and will give it some ‘id’ to provide some name to it for reference.
Under the <select> tag we will use <option> tag to define the elements of the list.
In the form after defining ‘options’ we will define an input field using the <input> tag and will make it of type button and we will define ‘onclick’ event which will call the function which we will define later in the script.

Defining script or function to remove

In these steps, we will define the function which will be called in the ‘onclick’ event of the above-defined button.

Initially, we will create a function using the ‘function’ keyword and will give it a name that will be called in the ‘onclick’ event.
In the defined function we will create a variable to store the return value from the call to the ‘document.getElementById()’ method.
We will pass the ‘id’ of the above-defined dropdown as the parameter to the call to the ‘document.getElementById()’ method.
By using the remove method with the variable (which contains the return value of the call to the method) and passing the parameter the option to delete by using the ‘selectedIndex’ method we will delete the required option.

These are the basic steps to delete an option from the dropdown, now let’s see some examples to get a better understanding of the above-defined steps.

Example

In this example, we are going to implement the above-defined algorithm step by step to delete the elements for the given dropdown menu, let’s implement the code −


<!DOCTYPE html>
<html>
<body>
   <p>Select any option and click the button to remove the selected option.</p>
   <form id = "myForm">
   <select id = "id_dropdown">
      <option>One</option>
      <option>Two</option>
      <option>Three</option>
   </select>
<input type = "button" onclick = "fun_remove()" value = "Click to Remove">
</form>
   <script>
      function fun_remove() {
         var element = document.getElementById("id_dropdown");
         element.remove(element.selectedIndex);
      }
   </script>
</body>
</html>

In the above output, we got one dropdown list and a button to remove the selected element. By clicking on the ‘Click to Remove’ button we can remove the element which is visible or selected from the list.

Conclusion

In this article, we have learned the method to remove the option from the dropdown menu. This is only possible if while defining the dropdown menu programmer defines or creates a button for the user to remove the options. To remove any option user have to select it and by using the remove() function and getting the element by ‘getElementById’ and ‘selectedIndex’ methods the user can remove it.