使用 JQuery 删除空的 tbody

Question

I have a lot of <tr class="form-items"> items inside my HTML code and I want to remove those tr's where <tbody> tag is empty.

I've tried $("tbody:empty").closest('.form-items').remove() but it is not the good solution.

<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).

In your case you have text nodes. Hence your selector cannot work.

Use this other approach (a tbody with no rows):

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

The snippet:

 $("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>

Answer 2

Search for first element in DOM, if exists and child contents ofare empty then remove it, if not exit the loop.

console.log('Before deletion', document.body.innerHTML)
while (true) {
  var elem = document.getElementsByTagName('tbody')[0];
  if (elem && !elem.innerHTML.trim()) {
    elem.parentNode.removeChild(elem);
  } else {
    break
  }
}
console.log('After deletion', document.body.innerHTML)

or even better approach get all elements first then loop through them.

const tbodyElements = document.getElementsByTagName('tbody')
for (let i = 0; i < tbodyElements.length; i++) {
  if (!tbodyElements[i].innerHTML.trim()) {
    tbodyElements[i].parentNode.removeChild(tbodyElements[i]);
  }
}