为什么我的 javascript 在 table 中添加旧的 tr？

Question

我有 ajax 请求获取数据并将其放入 table。我有一个模态框，每次单击具有不同 ID 的不同按钮时都会调用它。当我关闭模式时，我删除了新请求的 tr 元素。但是，当我尝试再次打开相同的模态时，不同的模态但是新的模态已经变旧了。你能帮助我吗？提前致谢。

 $(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();
           });
       });
   });

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

控制台 https://www.imageupload.co.uk/image/Z5Y6

Answer 1

看起来 this 在删除循环的上下文中不是 jQuery 对象，因此 .remove() 将不起作用。您可以这样做：

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

更新

这里有一个更优雅的解决方案

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);
    });
});

为什么我的 javascript 在 table 中添加旧的 tr？

Why my javasctipt add old tr in table?

html

jquery

modal-dialog