使用 JQuery 删除空的 tbody

Question

我的<tr class="form-items">HTML 代码中有很多项目，我想删除那些<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>

Answer 1

搜索 DOM 中的第一个元素（如果存在）及其子内容 是空的然后删除它，如果不是退出循环。

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)

或者更好的方法是先获取所有元素，然后循环遍历它们。

const tbodyElements = document.getElementsByTagName('tbody')

for (let i = 0; i < tbodyElements.length; i++) {

  if (!tbodyElements[i].innerHTML.trim()) {

    tbodyElements[i].parentNode.removeChild(tbodyElements[i]);

  }

}