在jquery中清除带有数据的动态生成表

我有一个jQueryDataTable，它在每一行上都有一个展开按钮。当我单击展开按钮时，它会展开该行，并显示另一个包含其他信息的嵌套表

我遇到的问题是，每当我快速双击展开按钮时，嵌套表就会被冗余记录填充。我的问题是如何刷新表中以前的数据

我随附了部分示例代码和以下问题：

  $('.js-cars-list').on('click', '.js-expand-btn', function () {
            var value = $(this).attr('id');
            $('.js-expand-btn').text('+');

            if ($(this).parents('tr').hasClass('parent')) {
                $(this).text('-');

                GetCarDetails(value);
            }
            else {
                $(this).text('+');
            }

        });


function GetCarDetails(carId) {

            $.ajax({
                url: '@Url.Action("GetCarDetails", "Cars")',
                type: 'POST',
                data: { carId: carId },
                dataType: 'json',
                success: function (data) {

                                    $.each(data.data, function (key, value) {

                                        $.each(value, function (k, v) {
                                            $(".mdl-data-table .mdl-data-table").append("<tr><td><a href=/Car/Detail?search=" + v.Id + ">" + v.Name + "</a></td><td>" + v.Model + "</td><td>" + v.RegNumber + "</td><td>");
                                        });

                                    });
                                },
                error: function (data) {
                    console.log('Error occured');
                }
            });

$（'.js cars list'）。在（'click'，'.js expand btn'，函数（）{
var值=$（this.attr（'id'）；
$（'.js展开btn'）.text（'+'）；
if（$（this）.parents（'tr'）.hasClass（'parent'））{
$（此）.text（'-'）；
GetCardDetails（值）；
}
否则{
$（this.text（+）；
}
});
函数GetCardDetails（carId）{
$.ajax({
url:'@url.Action（“GetCardDetails”、“Cars”），
键入：“POST”，
数据：{carId:carId}，
数据类型：“json”，
成功：功能（数据）{
$.each（数据、数据、函数（键、值）{
$。每个（值、函数（k、v）{
$（“.mdl数据表.mdl数据表”）.append（“+v.Model+”+v.RegNumber+”）；
});
});
},
错误：函数（数据）{
console.log（'发生错误'）；
}
});

我怎样才能澄清这一点

$(".mdl-data-table .mdl-data-table").append("<tr><td><a href=/Car/Detail?search=" + v.Id + ">" + v.Name + 
"</a></td><td>" + v.Model + "</td><td>" + v.RegNumber + "</td><td>");

$（“.mdl数据表.mdl数据表”）.append（“+v.Model+”“+v.RegNumber+”）；

下一次单击并用新数据填充它

---

请提供帮助。

您可以在向表中添加新数据之前清除表

像这样的

function GetCarDetails(carId) {

    // clear table data 
    $(".mdl-data-table").empty();

    $.ajax({
        url: '@Url.Action("GetCarDetails", "Cars")',
        type: 'POST',
        data: { carId: carId },
        dataType: 'json',
        success: function (data) {

            $.each(data.data, function (key, value) {

                $.each(value, function (k, v) {
                    $(".mdl-data-table").append("<tr><td><a href=/Car/Detail?search=" + v.Id + ">" + v.Name +
            "</a></td><td>" + v.Model + "</td><td>" + v.RegNumber + "</td><td>");
                });

            });
                        },
        error: function (data) {
            console.log('Error occured');
        }
    });

我看不出上面使用的两个类别有任何区别，所以您可以将其更改为

$(".mdl-data-table")

---

您可以在向表中添加新数据之前清除表

像这样的

function GetCarDetails(carId) {

    // clear table data 
    $(".mdl-data-table").empty();

    $.ajax({
        url: '@Url.Action("GetCarDetails", "Cars")',
        type: 'POST',
        data: { carId: carId },
        dataType: 'json',
        success: function (data) {

            $.each(data.data, function (key, value) {

                $.each(value, function (k, v) {
                    $(".mdl-data-table").append("<tr><td><a href=/Car/Detail?search=" + v.Id + ">" + v.Name +
            "</a></td><td>" + v.Model + "</td><td>" + v.RegNumber + "</td><td>");
                });

            });
                        },
        error: function (data) {
            console.log('Error occured');
        }
    });

我看不出上面使用的两个类别有任何区别，所以您可以将其更改为

$(".mdl-data-table")

---

可以使用empty（）函数清除表

---

可以使用empty（）函数清除表