in laravel i have bootstrap modal that shows a multipart/form when i choose an image, it remains and overlaps all userimages that i rode using ajax

i use laravel and here is my problem : i have a grid that is filled using Ajax , when i click the update button for a user a bootstrap modal is shown with the image of the user , i can change the userimage that is shown by hitting the browse button and select an image from my files , i don't submit change , and i just close the bootstrap , but still , when i click my other user's update button , the image that i chosed for the other user is overlapping the other users's userimage . how do i clear the file input after bootstrap hidden ? bellow is my code : notice i use Ajax , and also using data-dismiss="modal" to close the bootstrap modal . here is ajax code that i'm using to fill the modal :

    $('body').delegate('#student-info #edit','click',function (e) {
    var id = $(this).data('id');
    $.get("",{id:id},function (data) {

        $('#frm-update').find('#id').val(data.id);
        $('#frm-update').find('#name').val(data.name);
        $('#frm-update').find('#family').val(data.family);
        $('#frm-update').find('#username').val(data.username);
        $('#frm-update').find('#birth_date').val(data.birth_date);
        $('#frm-update').find('#phone').val(data.cell_phone);
        $('#frm-update').find('#email').val(data.email);
        $('#frm-update').find('#gender').val(data.gender);

        $('.user_image').find('#defaultimage').attr('src',data[0].image);


        $('#student-update').modal('show');


    })


})

and here is a part of updateuser.balde.php that calls and closes the modal :

    <div id="student-update" class="modal fade" role="dialog">
<div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" id="closemymodal" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">ویرایش کاربر</h4>
        </div>
        <form method="post" action="" enctype="multipart/form-data" id="cropitbaby" class="user_image">
            <div class="image-editor" style="float: right">
                <input type="file" id="userimage" name="userimage" class="cropit-image-input">
                <div class="cropit-preview"><img src="" alt="" id="defaultimage" name="defaultimage" style="cursor:pointer;width:248px;height: 248px;" /></div>
                <small style="color: red;">@foreach($errors->get('userimage') as $message )    @endforeach</small>
                <div class="image-size-label">

                    برش تصویر
                </div>
                <input type="range" class="cropit-image-zoom-input">
                <input type="hidden" name="image-data" id="image-data" class="hidden-image-data" />
            </div>
            <div id="result" style="display: none">
                <code>$form.serialize() =</code>
                <code id="result-data"></code>
            </div>
        </form>

the bellow button is responsible for closing the bootstrap modal :

    <button type="button" id="closemymodal" class="close" data-dismiss="modal">&times;</button>

via Chebli Mohamed