Remove options from select list in JavaScript

In this article, we will understand how to remove an option from the select list with the help of JavaScript. At the beginning of this article, we will learn some fundamental aspects of JavaScript, <select> tag, and remove method in JavaScript. After that, we will understand some examples of this article.

What do you mean by JavaScript?

JavaScript is an object-based, high-level language as it can access various HTML objects that are contained in the web page.

remove() method

The remove () method is used in JavaScript to remove the selected elements from the select list.

Syntax 1:

Example: $("p").remove();

Syntax 2:

Example: $("#select1 option[value='hello']").remove();

What do you mean by <select> tag?

The <select> tag is similar in functionality to unordered list <ul> or ordered list <ol> used in HTML to define a list. And <option> tag is similar to the list item <li> which specifies the list item in a list. The select and option tags are used to create drop-down menus. It is also called a pull-down list and drop-down list.

Syntax:

The <select> tag specifies that the text that follows is a list, and the <option> tag is used to determine the items of the list.

The following examples are used to remove option from the select list with the help of JavaScript.

Example 1:

Explanation:

In this example, we can choose any desired option from the list to remove the element from it. When we click the button then the selected element is removed from the select list.

Following JS code is used to remove element from the select list.

Output:

Below is the output of this example:

In this example, we have selected the "three" option value from the select list and after removing this element, the output is shown below:

Example 2:

Explanation:

In this example, you can select or define any option from the select list to remove. When we click the button then the defined element is removed from the select list.

Following JS code is used to remove element from the select list.

Output:

Below is the output of this example:

The "basic" option value from the select list is predefined to remove from the list in this example. When we click on the button, then the basic option value is removed from the select list. Below is the output of the select list after removing the basic option value from the select list.