Bootstrap Modal delete data after close event

Question

I have a listbox in my modal that is not clearing after i close my modal. when i re-open it, the data is still there. :(

Here is my code :

Javascript

$('#modalCRDDDST_Lookup').on('hidden.bs.modal', function (e) {
                $("#modalCRDDDST_Lookup").remove();
            });

Code for my Modal

<div class="modal fade" id="modalCRDDDST_Lookup" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width:800px;margin:5px auto">
        <asp:UpdatePanel ID="upModalCRDDDST_Lookup" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
            <ContentTemplate>
                <div class="modal-content" style="height:650px">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title"><asp:Label ID="Label12" runat="server" Text="CRDDDST - Lookup"></asp:Label></h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <asp:UpdatePanel ID="upCRDDDSTLookup" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
                                <Triggers>
                                    <asp:AsyncPostBackTrigger ControlID="btnCRDDDSTLookup_Search" EventName="Click" />
                                </Triggers>
                                <ContentTemplate>
                                    <table class="table">
                                        <tr>
                                            <td class="td col-md-12 bg-primary" style="text-align: center;">
                                                <asp:Label ID="Label18" class="label" runat="server" Text="Results" Font-Size="Large"/>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <asp:ListBox ID="lbCRDDDSTLookup_Results" runat="server" Height="175px" Width="745px" SelectionMode="Multiple" ></asp:ListBox>
                                            </td>
                                        </tr>
                                    </table>
                                </ContentTemplate>
                            </asp:UpdatePanel>

                            <div class="pull-right">
                                <asp:Button ID="btnCRDDDST_Lookup_Accept" runat="server" Text="OK" CssClass="btn btn-primary" OnClick="LookupCRDDDSTSearch" /> 
                                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</div>

Please can someone help me how to clear.

Thanks

Answer 1

Did you try to clear all listbox elements before deleting whole modal?

Possible answer already here: How to clear an ASP.NET listbox with Javascript?