How to remove options from select element using jQuery ?
Removing options from a select element using jQuery means programmatically deleting specific or all <option> elements within a <select> dropdown. This can be done using jQuery methods like remove() or empty(), allowing dynamic updates of the dropdown's available choices based on conditions.
Here we have some common approaches to to remove options from select element using jQuery:
Table of Content
Approach 1: Using the .remove() Method
The .remove() method in jQuery allows you to selectively remove <option> elements from a <select> element. By targeting specific options using their value or other selectors, .remove() deletes those options from the dropdown dynamically.
Example 1: In this example we use jQuery to remove an option from a dropdown when a button is clicked. It updates a message to notify that the option with value "val_1" is removed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Remove Option from Select</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<h1 style="color:green;">GeeksForGeeks</h1>
<p id="GFG_UP"></p>
<select id="mySelect">
<option value="val_1">Val_1</option>
<option value="val_2">Val_2</option>
<option value="val_3">Val_3</option>
<option value="val_4">Val_4</option>
</select>
<br><br>
<button>Click here</button>
<p id="GFG_DOWN" style="color: green; font-size: 24px; font-weight: bold;"></p>
<script>
// Update the text above the dropdown
$('#GFG_UP').text('Click on the button to remove an option from select');
// Add event listener to the button
$('button').on('click', function () {
// Remove the option with value 'val_1'
$("option[value='val_1']").remove();
// Update the message after the option is removed
$('#GFG_DOWN').text('Option with val_1 is removed!');
});
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Remove Option from Select</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<h1 style="color:green;">GeeksForGeeks</h1>
<p id="GFG_UP"></p>
<select id="mySelect">
<option value="val_1">Val_1</option>
<option value="val_2">Val_2</option>
<option value="val_3">Val_3</option>
<option value="val_4">Val_4</option>
</select>
<br><br>
<button>Click here</button>
<p id="GFG_DOWN" style="color: green; font-size: 24px; font-weight: bold;"></p>
<script>
// Update the text above the dropdown
$('#GFG_UP').text('Click on the button to remove an option from select');
// Add event listener to the button
$('button').on('click', function () {
// Remove the option with value 'val_1'
$("option[value='val_1']").remove();
// Update the message after the option is removed
$('#GFG_DOWN').text('Option with val_1 is removed!');
});
</script>
</body>
</html>
Output:

Approach 2: Using the .empty() Method
The .empty() method in jQuery removes all child elements from a selected element, including all <option> elements in a <select>. This approach clears the entire dropdown, leaving the <select> element empty but still intact in the DOM.
Example: In this example we removes all options from a dropdown when the button is clicked using jQuery's .empty() method. It updates a message notifying that all options have been removed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Remove Option from Select</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<h1 style="color:green;">GeeksForGeeks</h1>
<p id="GFG_UP"></p>
<select id="mySelect">
<option value="val_1">Val_1</option>
<option value="val_2">Val_2</option>
<option value="val_3">Val_3</option>
<option value="val_4">Val_4</option>
</select>
<br><br>
<button>Click here</button>
<p id="GFG_DOWN"
style="color: green;
font-size: 24px;
font-weight: bold;">
</p>
<script>
// Update the text above the dropdown
$('#GFG_UP').text('Click on the button to remove all options from select');
// Add event listener to the button
$('button').on('click', function () {
// Use the .empty() method to remove all options from the select
$('#mySelect').empty();
// Update the message after all options are removed
$('#GFG_DOWN').text('All options have been removed!');
});
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Remove Option from Select</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<h1 style="color:green;">GeeksForGeeks</h1>
<p id="GFG_UP"></p>
<select id="mySelect">
<option value="val_1">Val_1</option>
<option value="val_2">Val_2</option>
<option value="val_3">Val_3</option>
<option value="val_4">Val_4</option>
</select>
<br><br>
<button>Click here</button>
<p id="GFG_DOWN"
style="color: green;
font-size: 24px;
font-weight: bold;">
</p>
<script>
// Update the text above the dropdown
$('#GFG_UP').text('Click on the button to remove all options from select');
// Add event listener to the button
$('button').on('click', function () {
// Use the .empty() method to remove all options from the select
$('#mySelect').empty();
// Update the message after all options are removed
$('#GFG_DOWN').text('All options have been removed!');
});
</script>
</body>
</html>
Output:
