In this article, we will explore the process of eliminating an option from a select dropdown using JavaScript. Initially, we will cover some essential concepts related to JavaScript, the <select> tag, and the remove method in JavaScript. Following that, we will delve into several examples that illustrate the concepts discussed in this article.
What do you mean by JavaScript?
JavaScript is a high-level, object-oriented programming language that enables interaction with numerous HTML objects present within a web page.
remove method
The remove function in JavaScript is utilized to eliminate the chosen elements from the selection list.
Syntax 1:
$(selector).remove (selector)
Example: $("p").remove;
Syntax 2:
$("#FIELDID option[value='X']").remove();
For instance: $("#select1 option[value='hello']").detach;
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:
<select name = "select_list_name" size ="n" multiple>
<option value ="choice-name 1" selected> Text Label-1 </option>
<option value ="choice-name 2" selected> Text Label-2 </option>
..............................................................
..............................................................
</select>
The <select> tag indicates that the subsequent text is organized as a list, while the <option> tag serves to identify the individual items within that list.
The subsequent examples demonstrate how to eliminate an option from a selection list utilizing JavaScript.
Example 1:
<! DOCTYPE html>
<html>
<title>
Remove option from select list using JavaScript
</title>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<style>
h2 {
font-weight: bold;
margin-bottom: 2.5rem;
color: #aaa;
align: center;
font-size: 30px;
margin-top: 1.5rem;
font-weight: 1000;
}
p {
font-weight: bold;
margin-bottom: 2.5rem;
color: #aaa;
align: center;
font-size: 20px;
margin-top: 1.5rem;
font-weight: 1000;
}
h3 {
font-weight: bold;
margin-bottom: 2.5rem;
color: #aaa;
align: center;
font-size: 30px;
margin-top: 1.5rem;
font-weight: 1000;
}
body {
background: #191828;
color: #aaa;
font-family: "Roboto", Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: 300;
letter-spacing: 0.01em;
line-height: 1.6em;
margin-top: 30;
}
::placeholder {
color: #aaa;
font-weight: bold;
opacity: 1;
}
input[type='button'] {
box-sizing: border-box;
height: 35px;
display: inline-block;
border: 3px solid #2F96EF;
border-radius: 5px;
padding: 0 15px;
margin: 10px 0;
transition: .2s;
}
#selectNow {
box-sizing: border-box;
height: 35px;
display: inline-block;
border: 3px solid #2F96EF;
border-radius: 5px;
padding: 0 15px;
margin: 10px 0;
transition: .2s;
}
#selectNow:hover {
color: #FFFFFF;
background-color: #aaa;
font-weight: bold;
opacity: 1;
}
em {
font-family: Georgia, serif;
line-height: 1.6;
}
input[type='button']:hover {
color: #FFFFFF;
background-color: #3494e6;
}
</style>
<body>
<h3 align="center"> Example: </h3>
<h2 align="center"> Remove option from select JavaScript </h2>
<form id = "myForm" align = "center">
<select id = "selectNow">
<option value = "one"> One </option>
<option value ="two" > Two </option>
<option value ="three" > Three </option>
<option value ="apple" > Apple </option>
<option value ="pear" > Pear </option>
<option value ="ban" > Banana </option>
<option value="orange" > Orange </option>
</select>
<input type = "button" onclick = "remove()" value = "Click to Remove" >
</form>
<p align="center"> <em> Select and click the button to remove the selected option. </em> </p>
<script>
function remove() {
var x = document.getElementById("selectNow");
x.remove(x.selectedIndex);
}
</script>
</body>
</html>
Explanation:
In this illustration, we have the ability to select any preferred choice from the available options to eliminate the element from the list. Upon clicking the button, the chosen element will be removed from the selection list.
The JavaScript code below demonstrates how to eliminate an element from a selection list.
<script>
function remove() {
var x = document.getElementById("selectNow");
x.remove(x.selectedIndex);
}
</script>
Output:
Below is the output of this example:
In this illustration, we have chosen the "three" option from the dropdown menu, and upon the removal of this element, the resulting output is displayed below:
Example 2:
<! DOCTYPE html>
<html>
<title>
Remove option from select list using JavaScript
</title>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<style>
#select1:hover {
color: #FFFFFF;
background-color: #aaa;
font-weight: bold;
opacity: 1;
}
button:hover {
color: #FFFFFF;
background-color: #3494e6;
}
h2 {
font-weight: bold;
margin-bottom: 2.5rem;
color: #aaa;
align: center;
font-size: 30px;
margin-top: 1.5rem;
font-weight: 1000;
}
p {
font-weight: bold;
margin-bottom: 2.5rem;
color: #aaa;
align: center;
font-size: 20px;
margin-top: 1.5rem;
font-weight: 1000;
}
h3 {
font-weight: bold;
margin-bottom: 2.5rem;
color: #aaa;
align: center;
font-size: 30px;
margin-top: 1.5rem;
font-weight: 1000;
}
body {
background: #191828;
color: #aaa;
font-family: "Roboto", Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: 300;
letter-spacing: 0.01em;
line-height: 1.6em;
margin-top: 30;
}
::placeholder {
color: #aaa;
font-weight: bold;
opacity: 1;
}
button {
box-sizing: border-box;
height: 35px;
display: inline-block;
border: 3px solid #2F96EF;
border-radius: 5px;
padding: 0 15px;
margin: 10px 0;
transition: .2s;
}
#select1 {
box-sizing: border-box;
height: 35px;
display: inline-block;
border: 3px solid #2F96EF;
border-radius: 5px;
padding: 0 15px;
margin: 10px 0;
transition: .2s;
}
em {
font-family: Georgia, serif;
line-height: 1.6;
}
</style>
</head>
<body align="center">
<h1 style="color: green">
<h3 align="center"> Example: </h3>
<h2 align="center"> Remove defined option from select JavaScript </h2>
<p align="center"> <em>
Select any one option from the given options in select list. <select id="select1">
<option value="free">
Free
</option>
<option value="basic">
Basic
</option>
<option value="premium">
Premium
</option>
<option value= "one"> One </option>
<option value="two"> Two </option>
<option value="three"> Three </option>
</select>
</em> </p>
<p align = "center"> <em> Click the button below to
Remove one option from the select box. </em> </p>
<button onclick="removeOption()">
Remove option
</button>
<script src=
"https://placehold.co/400x300/3498db/ffffff?text=Sample+Image">
</script>
<script type = "text/javascript">
function removeOption() {
$("#select1 option[value='basic']").remove();
}
</script>
</body>
</html>
Explanation:
In this scenario, you have the ability to choose or specify any item from the dropdown menu to eliminate. Upon clicking the button, the chosen element will be removed from the dropdown list.
The JavaScript code provided below is utilized for eliminating an element from a select dropdown list.
<script type="text/javascript">
function removeOption() {
$("#select1 option[value='basic']").remove();
}
</script>
Output:
Below is the output of this example:
In this example, the "basic" option value in the dropdown menu is set up to be eliminated from the list. Upon clicking the button, the basic option is successfully removed from the dropdown menu. Following this action, the output of the dropdown menu is displayed below, reflecting the absence of the basic option.