删除HTML表标签IF包含的东西

Question

我有3个表，其中一些表有一些子项，例如：<tr><td>...而其他表只有一个没有任何内容的表标记。我想删除空表。
注意：所有表格都有tbldetails名称。

var lengthtbldetail = document.getElementsByName('tbldetails');

for(var itd=0;itd<lengthtbldetail.length;itd++){
var tbdtlv = 0;

if(lengthtbldetail[itd].innerHTML.indexOf('<td>') != -1) {

// REMOVE IT...

}
}

这里要解决的一个例子：

＆＃13;

＆＃13;

<table name="tbldetails">
<tr>
<td>
Table 1
</td>
</tr>
</table>
<br />

<!--I want to Remove the following tables:-->
<table name="tbldetails">
</table>
<table name="tbldetails">
</table>
<table name="tbldetails">
</table>
<br />

<table name="tbldetails">
<tr>
<td>
Table 3
</td>
</tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用removeChild。您的 if 块需要

if(lengthtbldetail[itd].innerHTML.indexOf('<td>') == -1) 
{
   lengthtbldetail[itd].parentNode.removeChild( lengthtbldetail[itd] );
}

<强>演示

＆＃13;

＆＃13;

var lengthtbldetail = document.getElementsByTagName('table');
console.log(lengthtbldetail.length)
for (var itd = lengthtbldetail.length - 1; itd >= 0; itd--)
{
  if (lengthtbldetail[itd].innerHTML.indexOf('<td>') == -1) {
    lengthtbldetail[itd].parentNode.removeChild(lengthtbldetail[itd]);
  }
}

＆＃13;

<table name="tbldetails">
  <tr>
    <td>
      Table 1
    </td>
  </tr>
</table>
<br />

<!--I want to Remove this table:-->
<table name="tbldetails">
</table>
<br />

<table name="tbldetails">
  <tr>
    <td>
      Table 3
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

使用30张桌子进行演示

＆＃13;

＆＃13;

var lengthtbldetail = document.getElementsByTagName('table');
for (var itd = lengthtbldetail.length - 1; itd >= 0; itd--)
{
  if (lengthtbldetail[itd].innerHTML.indexOf('<td>') == -1) {
    lengthtbldetail[itd].parentNode.removeChild(lengthtbldetail[itd]);
  }
}

＆＃13;

<table name="tbldetails">
  <tr>
    <td>
      Table 1
    </td>
  </tr>
</table>
<br />

<!--I want to Remove this table:-->
<table name="tbldetails">
</table>
<br />

<table name="tbldetails">
  <tr>
    <td>
      Table 3
    </td>
  </tr>
</table>

<table name="tbldetails">
  <tr>
    <td>
      Table 1
    </td>
  </tr>
</table>
<br />

<!--I want to Remove this table:-->
<table name="tbldetails">
</table>
<br />

<table name="tbldetails">
  <tr>
    <td>
      Table 3
    </td>
  </tr>
</table>

<table name="tbldetails">
  <tr>
    <td>
      Table 1
    </td>
  </tr>
</table>
<br />

<!--I want to Remove this table:-->
<table name="tbldetails">
</table>
<br />

<table name="tbldetails">
  <tr>
    <td>
      Table 3
    </td>
  </tr>
</table>

<table name="tbldetails">
  <tr>
    <td>
      Table 1
    </td>
  </tr>
</table>
<br />

<!--I want to Remove this table:-->
<table name="tbldetails">
</table>
<br />

<table name="tbldetails">
  <tr>
    <td>
      Table 3
    </td>
  </tr>
</table>

<table name="tbldetails">
  <tr>
    <td>
      Table 1
    </td>
  </tr>
</table>
<br />

<!--I want to Remove this table:-->
<table name="tbldetails">
</table>
<br />

<table name="tbldetails">
  <tr>
    <td>
      Table 3
    </td>
  </tr>
</table>

<table name="tbldetails">
  <tr>
    <td>
      Table 1
    </td>
  </tr>
</table>
<br />

<!--I want to Remove this table:-->
<table name="tbldetails">
</table>
<br />

<table name="tbldetails">
  <tr>
    <td>
      Table 3
    </td>
  </tr>
</table>

<table name="tbldetails">
  <tr>
    <td>
      Table 1
    </td>
  </tr>
</table>
<br />

<!--I want to Remove this table:-->
<table name="tbldetails">
</table>
<br />

<table name="tbldetails">
  <tr>
    <td>
      Table 3
    </td>
  </tr>
</table>

<table name="tbldetails">
  <tr>
    <td>
      Table 1
    </td>
  </tr>
</table>
<br />

<!--I want to Remove this table:-->
<table name="tbldetails">
</table>
<br />

<table name="tbldetails">
  <tr>
    <td>
      Table 3
    </td>
  </tr>
</table>

<table name="tbldetails">
  <tr>
    <td>
      Table 1
    </td>
  </tr>
</table>
<br />

<!--I want to Remove this table:-->
<table name="tbldetails">
</table>
<br />

<table name="tbldetails">
  <tr>
    <td>
      Table 3
    </td>
  </tr>
</table>

<table name="tbldetails">
  <tr>
    <td>
      Table 1
    </td>
  </tr>
</table>
<br />

<!--I want to Remove this table:-->
<table name="tbldetails">
</table>
<br />

<table name="tbldetails">
  <tr>
    <td>
      Table 3
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以通过两种方式删除它们。

  

通过原生javascript：

:DOWN

  

通过Jquery

var table = document.querySelectorAll('table:empty');
for (index = table.length - 1; index >= 0; index--) {
    table[index].parentNode.removeChild(table[index]);
}