javascript - 使用 JQuery 删除空 tbody

Question

我的 HTML 代码中有很多<tr class="form-items">项目，我想删除那些<tbody>标记为空的 tr。

我试过$("tbody:empty").closest('.form-items').remove()了，但这不是好的解决方案。

<tr class="form-items">
    <td colspan="3" class="forms-group">
        <table class="from-item-category">
            <tbody>
            </tbody>
        </table>
    </td>
</tr>
<tr class="form-items">
    <td colspan="3" class="forms-group">
        <table class="from-item-category">
            <tbody>
                <tr class="form-item-row">
                    <td class="fill-form">
                        <a>test #1</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </td>
</tr>

标签： javascriptjqueryhtml

Answer 1

:empty：选择所有没有子元素的元素（包括文本节点）。

在您的情况下，您有文本节点。因此，您的选择器无法工作。

使用这种其他方法（没有行的 tbody）：

$("tbody:not(:has(tr))")

片段：

$("tbody:not(:has(tr))").closest('.form-items').remove();


console.log($('table')[0].outerHTML)

.as-console {
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<table>
    <tr class="form-items">
        <td colspan="3" class="forms-group">
            <table class="from-item-category">
                <tbody>
                </tbody>
            </table>
        </td>
    </tr>
    <tr class="form-items">
        <td colspan="3" class="forms-group">
            <table class="from-item-category">
                <tbody>
                <tr class="form-item-row">
                    <td class="fill-form">
                        <a>test #1</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </td>
    </tr>
</table>