In this article I will explain with an example, how to delete / remove / clear all items (options) from DropDownList (DropDown) using JavaScript and jQuery.
Delete / Remove / Clear all items (Option) from DropDownList using JavaScript
The following HTML Markup consists of a DropDownList control and a Button.
When the Button is clicked, the DeleteAllValues JavaScript function is executed. Inside this function, all the items (options) of the DropDownList control are removed (deleted) by setting its options length to zero.
<select id="ddlFruits" style="width: 150px;">
<option value="1">Mango</option>
<option value="2">Apple</option>
<option value="3">Banana</option>
<option value="4">Guava</option>
<option value="5">Pineapple</option>
<option value="6">Papaya</option>
<option value="7">Grapes</option>
</select>
<br />
<hr />
<input id = "btnDeleteAll" type="button" value="Delete All" onclick="DeleteAllValues();" />
<script type="text/javascript">
function DeleteAllValues() {
var listBox = document.getElementById("ddlFruits");
listBox.options.length = 0;
return false;
}
</script>
Delete / Remove / Clear all items (Option) from DropDownList using jQuery
The following HTML Markup consists of a DropDownList control and a Button.
When the Button is clicked, the jQuery click event handler is executed. Inside this event handler, all the items (options) of DropDownList control are removed (deleted) using the jQuery remove function.
<select id="ddlFruits" style="width: 150px;">
<option value="1">Mango</option>
<option value="2">Apple</option>
<option value="3">Banana</option>
<option value="4">Guava</option>
<option value="5">Pineapple</option>
<option value="6">Papaya</option>
<option value="7">Grapes</option>
</select>
<br />
<hr />
<input id="btnDeleteAll" type="button" value="Delete All" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnDeleteAll").bind("click", function () {
$("#ddlFruits option").remove();
});
});
</script>
Screenshot
![Delete / Remove / Clear all items (options) from DropDownList using JavaScript and jQuery]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
