Question

 $(document).ready(function () {
            $('#btnSearch').bind('click', function () {
                var textS = $("#txtSearch").val();
                var filterS = $("#Filter option:selected").val();
                var url = '@Url.Action("SearchGuest","Dashboard")';
                alert(url);
                $.ajax({
                    type: 'GET',
                    url: url,
                    data:{text:textS,filter:filterS},
                    success: function (emp) {
                        $('#TableGuest tbody > tr').remove();
                        jQuery.each(emp, function (i, val) {

                            $('#TableGuest tr:last').after("<tr><td>"+val.Name+"</td><td>"+val.FatherName+"</td><td>"+val.CNIC+"</td><td>"+val.Phone+"</td></tr>");
                        });

                    },
                    error: function (emp) {

                    }
                });


            });
        });

我尝试了各种功能，如

$('#TableGuestBody').empty()
$('#TableGuest tbody > tr').remove();
$("#TableGuestBody").html("");

但以上都没有奏效：（

它继续添加新行而不删除以前的行！

注意：我只想删除<tr>

中的<tbody>

Answer 1

假设您确实有<tbody id="TableGuestBody">元素，那么使用$('#TableGuestBody').empty()可以正常工作（并清除所有<tr>元素）。

您的问题在于添加新行的方式。

$('#TableGuest tr:last').after(...);

将在表格中的最后一个<tr>元素之后添加新行，并且由于您刚刚删除了<tbody>元素中的所有行，因此新行将添加到您的<thead>元件。所以现在当你调用$('#TableGuestBody').empty()时，它会清空已经为空的<tbody>元素的内容，但你仍然可以看到之前添加的行，因为它们位于<thead>元素中。修改代码以将新行添加到

$('#TableGuestBody').append(...);

Answer 2

这对你有用，对我有用

$(document).ready(function() {
        $("tbody").find("tr").remove();
    });

这样，它只会删除tr

中的tbody

或者

如果您的页面上有多个表格，您可以更具体地说明要清空哪个人

 $(document).ready(function() {
        $("tbody#TableGuestBody").find("tr").remove();
    });

检查 here

清空不起作用

2 个答案:

或者