javascript - 使用 JQuery 删除空的 tbody

Question

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

我试过了 $("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>

Answer 1

:empty: Select all elements that have no children (including text nodes).

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

使用其他方法(没有行的 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>