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

但是上面的none是有效的:(

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

注意：我只想删除<tbody>

里面的<tr>

Answer 1

这对你有用，对我也有用

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

这样它只会删除 tbody

中的 tr

或

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

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

检查一下 here

Answer 2

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

您的问题与添加新行的方式有关。

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

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

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