Laravel How to reset modal ajax data values upon closing the modal

Question

I am currently working on populating a user's searching for available appointments by selecting a date, start time and end time. I am trying to populate them onto a modal which is currently working. However I realise that whenever I close the modal and search for the new timeslots, the previous data populated on the modal will still be there.

I have tried doing function when I close the modal, the modal data will be cleared.

Below are my html codes for the modal:

<div class="modal fade" id="myModalNewAppointment">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Select Appointment</h4>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                {{-- <form id="test" action="" method="post"> --}}
                    <div class="form-group">
                        <label for="modal">Select a Timeslot</label>
                        <div class="spacer"></div>
                        <div class="timeslots-section">
                            <div class="timeslots text-center">
                                
                            </div> <!-- end timeslots -->
                        </div>
                    </div>
                {{-- </form> --}}
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="new_appt_cfm_btn" data-loading-text="<i class='fa fa-spinner fa-spin'></i> saving..">Confirm</button>
                <button type="button" class="btn btn-outline-primary" id="close_btn" data-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>

Below is my ajax method to retrieve the timeslots:

 $("#find_appointment_btn").click(function(event){
            event.preventDefault();
            let select_date = $('#select_date').val();
            let start_time = $('#start_time').val();
            let end_time = $('#end_time').val();

            let data = { select_date: select_date, start_time: start_time, end_time: end_time };
            $.ajax({
                type:"POST",
                url: "{{ route('assistant.newappts.get') }}",
                headers: { 
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',  
                    'Content-Type': 'application/json'
                },
                data: JSON.stringify(data),
                dataType: "json",
                success:function(data){
                    console.log(data);
                    if(data == ""){
                        alert("Clinic is close!");
                        return;
                    }
                    else if(data != ""){
                        $('#myModalNewAppointment').modal({backdrop: 'static', keyboard: false});
                        data.forEach(function(dt) {
                            // do something with `item`
                            // $(".timeslots").append(dt);
                            $('.timeslots').append('<input type="checkbox" class="timeslotchk" name="timeslot" value="'+ dt +'"/>' + dt );  
                        }); 
                    }                      
                },
                error: function(error) {                   
                    console.log(error);
                }
            });
        });

Below is the method I have tried to reset the data populated on my modal:

$("#myModalNewAppointment").on("hidden.bs.modal", function () {
    $('#myModalNewAppointment').reset();
});

Answer 1

When you call the ajax request on the success you have appended the data in model "timeslots" division so its obvious that data will be still there on the hiding model try to empty the timeslots, try below code hope it work for you and make sure that method trigger on closing of model

$("#myModalNewAppointment").on("hidden.bs.modal", function () { $('#myModalNewAppointment').find(".timeslots").empty(); });