Question

<table id="test">
 <thead>Some Content</thead>
 <tbody></tbody>
 <tbody>
 <tr>
 <td colspan="9">Some TD content</td>
 </tr>
 </tbody>
 <tbody></tbody>
</table>

如您所见，上述结构会生成一些空的<tbody>。如何删除没有内容的所有<tbody>？

$("#tbodyid").empty();

Answer 1

找到没有孩子的任何tbody，然后将其删除：

$("tbody").filter(function() {
    return $(this).children().length === 0;
}).remove();

文档中的更多内容：filter，children，remove

在任何模糊的现代浏览器上，如果重要的话，你可以提高效率：

$("tbody").filter(function() {
    return !this.firstElementChild;
}).remove();

firstElementChild是一个DOM属性，它是您使用它的元素的第一个元素子元素（忽略注释和文本节点等非元素节点）。如果是null，则元素中没有子项。

或Vohuman points out，我们可以使用rows property：

$("tbody").filter(function() {
    return this.rows.length === 0;
}).remove();

Answer 2

您可以使用each来迭代tbody个元素并验证is(':empty')（没有孩子）。如果有孩子，请使用remove()将其从页面中删除。

  $("#test tbody").each(function () {
     if($(this).is(':empty')) {
        $(this).remove();
      }
  });

$(document).ready(function() {
  $("#test tbody").each(function () {
     if($(this).is(':empty')) {
        $(this).remove();
      }
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="test">
 <thead>Some Content</thead>
 <tbody></tbody>
 <tbody>
 <tr>
 <td colspan="9">Some TD content</td>
 </tr>
 </tbody>
 <tbody></tbody>
</table>

Answer 3

找到tbody然后使用each并设置条件，如果tbody内部没有元素可能为空。

var tbody = $('table#test').find('tbody');

tbody.each(function(){
    if($(this).children().length === 0){
        $(this).remove();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="test">
 <thead>Some Content</thead>
 <tbody></tbody>
 <tbody>
 <tr>
 <td colspan="9">Some TD content</td>
 </tr>
 </tbody>
 <tbody></tbody>
</table>

Answer 4

你可以用它来删除空的tbody

$（ “＃测试”）。发现（ “TBODY”）。每个（函数（）{
if($(this).children().length == 0)
{
    $(this).remove();
} 
}）;

或者您可以查看此fiddle

jQuery删除没有内容

4 个答案: