In this article I will explain how to make an ASP.Net ListBox empty by clearing (removing) all items of the ASP.Net ListBox using JavaScript and jQuery.
Clear (Remove) all items of ASP.Net ListBox using JavaScript
The following HTML Markup consists of an ASP.Net ListBox control and a Button.
When the Button is clicked, the DeleteAllValues JavaScript function is executed. Inside this function, all the items of the ASP.Net ListBox control are removed (deleted) by setting its options length to zero
<asp:ListBox ID="ListBox1" runat="server" Width="150" Height="60" SelectionMode="Multiple">
<asp:ListItem Text="Mango" Value="1"></asp:ListItem>
<asp:ListItem Text="Apple" Value="2"></asp:ListItem>
<asp:ListItem Text="Banana" Value="3"></asp:ListItem>
<asp:ListItem Text="Guava" Value="4"></asp:ListItem>
<asp:ListItem Text="Pineapple" Value="5"></asp:ListItem>
<asp:ListItem Text="Papaya" Value="6"></asp:ListItem>
<asp:ListItem Text="Grapes" Value="7"></asp:ListItem>
</asp:ListBox>
<br />
<hr />
<asp:Button ID="btnDeleteAll" Text="Delete All" runat="server" OnClientClick="return DeleteAllValues()" />
<script type="text/javascript">
function DeleteAllValues() {
var listBox = document.getElementById("<%= ListBox1.ClientID%>");
listBox.options.length = 0;
return false;
}
</script>
Clear (Remove) all items of ASP.Net ListBox using jQuery
The following HTML Markup consists of an ASP.Net ListBox control and a Button.
When the Button is clicked, the jQuery click event handler is executed. Inside this event handler, all the options of ASP.Net ListBox control are removed (deleted) using the jQuery remove function.
<asp:ListBox ID="ListBox1" runat="server" Width="150" Height="60" SelectionMode="Multiple">
<asp:ListItem Text="Mango" Value="1"></asp:ListItem>
<asp:ListItem Text="Apple" Value="2"></asp:ListItem>
<asp:ListItem Text="Banana" Value="3"></asp:ListItem>
<asp:ListItem Text="Guava" Value="4"></asp:ListItem>
<asp:ListItem Text="Pineapple" Value="5"></asp:ListItem>
<asp:ListItem Text="Papaya" Value="6"></asp:ListItem>
<asp:ListItem Text="Grapes" Value="7"></asp:ListItem>
</asp:ListBox>
<br />
<hr />
<asp:Button ID="btnDeleteAll" Text="Delete All" runat="server" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=btnDeleteAll]").bind("click", function () {
$("[id*=ListBox1] option").remove();
return false;
});
});
</script>
Screenshot
![Clear (Remove) all items of ASP.Net ListBox using JavaScript and jQuery]()
Demo
Downloads
Download Code
