Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Select remove() Method
The HTML DOM Select remove() method removes an option from a dropdown list (select element) in an HTML document. This method is useful for dynamically managing dropdown options based on user interactions or application logic.
Syntax
Following is the syntax for the Select remove() method −
selectObject.remove(index)
Parameters
The method accepts the following parameter −
index − A number representing the index position of the option to be removed. The index starts from 0 for the first option.
Return Value
This method does not return any value. It simply removes the specified option from the select element.
Example 1 − Removing First Option
Following example demonstrates removing the first option (index 0) from a dropdown list −
<!DOCTYPE html>
<html>
<head>
<title>Select remove() Method</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Remove First Subject</h2>
<p>Select your favourite subject:</p>
<select id="subjectList" style="padding: 8px; font-size: 14px;">
<option>Physics</option>
<option>Chemistry</option>
<option>Mathematics</option>
<option>Biology</option>
</select>
<br><br>
<button onclick="removeFirst()" style="padding: 8px 16px; background: #007bff; color: white; border: none; cursor: pointer;">Remove First Subject</button>
<p id="message"></p>
<script>
function removeFirst() {
var selectElement = document.getElementById("subjectList");
if (selectElement.options.length > 0) {
var removedOption = selectElement.options[0].text;
selectElement.remove(0);
document.getElementById("message").innerHTML = "Removed: " + removedOption;
} else {
document.getElementById("message").innerHTML = "No options left to remove";
}
}
</script>
</body>
</html>
The output shows a dropdown with four subjects. Clicking the button removes the first option (Physics) −
Select your favourite subject: [Physics ?] [Remove First Subject] Removed: Physics After click: [Chemistry ?] with Chemistry, Mathematics, Biology remaining
Example 2 − Removing Last Option
Following example shows how to remove the last option from a select element −
<!DOCTYPE html>
<html>
<head>
<title>Remove Last Option</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Remove Last Option Demo</h2>
<select id="languageList" style="padding: 8px; font-size: 14px;">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<option value="php">PHP</option>
</select>
<br><br>
<button onclick="removeLast()" style="padding: 8px 16px; background: #dc3545; color: white; border: none; cursor: pointer;">Remove Last Language</button>
<p id="result"></p>
<script>
function removeLast() {
var selectElement = document.getElementById("languageList");
var optionCount = selectElement.options.length;
if (optionCount > 0) {
var lastIndex = optionCount - 1;
var removedOption = selectElement.options[lastIndex].text;
selectElement.remove(lastIndex);
document.getElementById("result").innerHTML = "Removed: " + removedOption;
} else {
document.getElementById("result").innerHTML = "No options available";
}
}
</script>
</body>
</html>
The output displays a dropdown with programming languages. Clicking the button removes the last option (PHP) −
[HTML ?] [Remove Last Language] Removed: PHP After click: [HTML ?] with HTML, CSS, JavaScript remaining
Example 3 − Removing Selected Option
Following example demonstrates removing the currently selected option −
<!DOCTYPE html>
<html>
<head>
<title>Remove Selected Option</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Remove Selected Option</h2>
<p>Choose a color and click remove:</p>
<select id="colorList" style="padding: 8px; font-size: 14px;">
<option value="red">Red</option>
<option value="green" selected>Green</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
</select>
<br><br>
<button onclick="removeSelected()" style="padding: 8px 16px; background: #28a745; color: white; border: none; cursor: pointer;">Remove Selected Color</button>
<p id="status"></p>
<script>
function removeSelected() {
var selectElement = document.getElementById("colorList");
var selectedIndex = selectElement.selectedIndex;
if (selectedIndex >= 0) {
var selectedOption = selectElement.options[selectedIndex].text;
selectElement.remove(selectedIndex);
document.getElementById("status").innerHTML = "Removed selected color: " + selectedOption;
} else {
document.getElementById("status").innerHTML = "No option selected";
}
}
</script>
</body>
</html>
Initially, "Green" is selected. Clicking the button removes the selected option −
Choose a color and click remove: [Green ?] [Remove Selected Color] Removed selected color: Green After click: [Red ?] with Red, Blue, Yellow remaining
How It Works
The remove() method works by accessing the options collection of the select element and removing the option at the specified index position. When an option is removed:
The options array automatically adjusts, and subsequent options shift down by one index position
If the removed option was selected, the selection moves to the next available option or becomes unselected if no options remain
The
lengthproperty of the options collection decreases by one
Browser Compatibility
The Select remove() method is supported in all modern web browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 5.5+. It is a standard part of the HTML DOM specification.
Conclusion
The HTML DOM Select remove() method provides a simple way to dynamically remove options from dropdown lists. By specifying the index of the option to remove, developers can create interactive forms that respond to user actions and update dropdown contents in real-time.
169 Views
