در این مقاله نحوه حذف کلیه آیتمهای کنترل ListBox مخصوص Asp.Net را با استفاه از JavaScript و JQuery شرح می دهیم .

برای حذف آیتمهای Listbox مطابق مراحل زیر عمل می نماییم :

ابتدا یک کنترل ListBox و یک دکمه به صفحه اضافه می کنیم  مانند تگ های پایین :

<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>

هنگامی که دکمه کلیک شد رویداد JQuery اجرا میشود با استفاده از متد Remove و تمام محتویات ListBox حذف میشود .

<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>