清空 <tbody> 不起作用

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("");

但以上都不起作用:(

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

注意：我只想删除<tbody>中的<tr>

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

这样它只会删除tbody中的tr

或

如果您的页面上有多个表格，您可以更具体地指定要清空的 tbody

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

检查一下here