CODEWITHSUNDEEP
javascripthtml
Emma
Emma

Reputation: 69

Remove HTML Table Tag IF Contain Something

I have 3 tables, some of them has a child items such as: <tr><td>... and others has nothing just a table tag without anything inside. i want to remove empty tables.
note: all tables has a tbldetails name.

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

}
}

Here an example to solve: 

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

Upvotes: 2

Views: 59

Answers (2)

gurvinder372
gurvinder372

Reputation: 68423

Use removeChild. Your if block needs to be

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

Demo

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]);
  }
}
<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>

Demo with 30 tables

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]);
  }
}
<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>

Upvotes: 3

A.D.
A.D.

Reputation: 2372

you can remove them by two ways.

By native javascript:

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

By Jquery

$("table:empty").remove();

Upvotes: 0

Related Questions