Why my javasctipt add old tr in table?

Question

I have ajax request to get data and put it in table. I have one modal box which call it every time when I click on different buttons with different ids. When I close the modal, I remove tr element for new request. But when I try open again the same modal when different but It have got older tr with the new ones. Can you help me? Thanks in advance.

 $(document.body).on("click",'.bid-show',function()
   {
       var CarID = $(this).data('bidders-id');
       $('#bidModal').on("show.bs.modal",function()
       {
           $.get("http://url" + CarID, function(data) {
               $.each(data, function(i, val) {
                   $('.bid-table').find('table tbody').append(BidRowRender(val));
               });
           });
       });
       $('#modal-close').on('click', function()
       {
           $('.bid-table').find('table tbody tr').each(function(){
               this.remove();
           });
       });
   });

And HTML

<div id="bidHistoryData" class="table-responsive">
<table class="table table-striped b-t b-light text-sm" style="">
    <thead>
        <tr>
            <th>
               ID
            </th>
            <th>
                Car ID
            </th>
            <th>
                Date
            </th>
            <th>
                Make
            </th>
            <th>
                Model
            </th>
            <th>
                Image
            </th>
            <th>
                Current Bid
            </th>
            <th>
                Max Bid
            </th>
            <th>
                Action
            </th>
        </tr>
    </thead>
    <tbody>
    <!-- Start loop -->
        {{ car:getNewCarsForStaffBidHistory }} 
        <tr>
            <td>
                {{id}}
            </td>
            <td>
                {{ car_id }}
            </td>
            <td>
                {{ created }}
            </td>
            <td>
                {{ car_brand_title }}
            </td>
            <td>
                {{ car_model_title }}
            </td>
            <td>
                <img class="" alt="{{ car_brand_title }} {{ car_model_title }}"
                data-original="{{car:getAvatarByID id='{{car_avatar}}' }}"
                src="{{car:getAvatarByID id='{{car_avatar}}' }}" width="90px" height="67px">
            </td>
            <td>
                {{ car_current_bid }}
            </td>
            <td>
                {{ max_bid }}
            </td>
            <td>
                <a data-toggle="modal" id="show-bidders-{{car_bid_car_id}}" data-bidders-id="{{car_bid_car_id}}" data-target="#bidModal" href="#" class="btn btn-sm btn-info bid-show">Show bids <span class="badge badge-white">{{ TotalBid }}</span></a>
            </td>
        </tr>
        {{ /car:getNewCarsForStaffBidHistory }}
        <!-- endloop -->
    </tbody>
</table>
<!--Modals-->
<div class="modal fade" id="bidModal" tabindex="-1" role="dialog" aria-labelledby="Bids Information" aria-hidden="true" data-toggle="carModal" style="z-index: 9999;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">All Bids</h4>
            </div>
            <div class="modal-body bid-table table-responsive" >
                <table class="table table-striped b-t b-light text-sm">
                    <thead>
                        <th>Bid Id</th>
                        <th>Username</th>
                        <th>Wallet</th>
                        <th>Value</th>
                        <th>Status</th>
                        <th>Action</th>
                    </thead>
                    <tbody>
                        <!--Bids Content Here-->
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" id="modal-close" class="btn btn-danger" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>
<!--End modals-->

Console https://www.imageupload.co.uk/image/Z5Y6

Answer 1

It looks like this in the context of your remove loop is not a jQuery object and therefore .remove() will not work. You can do this instead:

$('#bidModal').on("hide.bs.modal", function () {
    $('.bid-table').find('table tbody tr').remove();
});

Update

Here is a more elegant solution

var $show_links = $('.bid-show'),
    $modal = $('#bidModal'),
    $tbody = $modal.find('.bid-table table tbody');

function updateModalTable(car_id) {
    $tbody.find('tr').remove();
    $.get("http://url" + car_id, function (data) {
        $.each(data, function (i, val) {
            $tbody.append(BidRowRender(val));
        });
    });
}

$show_links.each(function (k, link) {
    var car_id = $(link).data('bidders-id');
    $modal.on("show.bs.modal", function (e) {
        updateModalTable(car_id);
    });
});