Delete empty td in table

Question

I have a table and jquery code and I need: if td is empty, then remove tr parent of td .

How I can do it?

My code doesn't work. In my example I have empty td . I want remove tr parent. Why my code not working? What am I doing wrong? I search td for each td , and if td is empty I remove tr parent. But not working.. Not errors..

 $('#table_serv tr').each(function(){ if( $(this).find('td').text().trim() === '' ) $(this).find('td').parent().remove(); // if it is empty, then remove parent tr });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table border="0" class="document-as" color="black" id="table_serv" style="font-size: 12px;border-right:0" width="100%"> <thead> <tr> <th style="text-align: center;color: white;font-weight: 600; width:5%"></th> <th style="text-align: left;color: white;font-weight: 600;width:35%;"><span style="font-family:verdana,geneva,sans-serif;"><span style="color:#000000;"><strong>Description</strong></span></span> </th> <th style="text-align: center;color: white;font-weight: 600;width:25%;"><span style="font-family:verdana,geneva,sans-serif;"><span style="color:#000000;"><strong>Selling Price</strong></span></span> </th> <th style="text-align: center;color: white;font-weight: 600;width:15%;"><span style="font-family:verdana,geneva,sans-serif;"><span style="color:#000000;"><strong>Quantity</strong></span></span> </th> <th style="text-align: center;color: white;font-weight: 600;width:15%"><span style="font-family:verdana,geneva,sans-serif;"><span style="color:#000000;"><strong>Total</strong></span></span> </th> </tr> </thead> <tbody> <tr> <td class="serv-nomer" style=""><span style="font-family:verdana,geneva,sans-serif;">:0,00</span> <br> &nbsp;</td> <td style="text-align:left;"><span class="en_us" style=""></span><span class="de_de" style=""></span></td> <td class="serv-price" style=""><span>0,00 €</span></td> <td style=""><span style="font-family:verdana,geneva,sans-serif;">0,00</span></td> <td style=""><span style="font-family:verdana,geneva,sans-serif;"><strong>0,00 €</strong></span></td> </tr> <tr> <td class="serv-nomer" style=""><span style="font-family:verdana,geneva,sans-serif;">9:324,00</span> <br> &nbsp;</td> <td style="text-align:left;"><span class="en_us" style="">Justification safety (GOST-Norm)</span><span class="de_de" style="">Begründung Sicherheit (GOST-Norm)</span></td> <td class="serv-price" style=""><span>324,00 €</span></td> <td style="">1,00</td> <td style=""><span style="font-family:verdana,geneva,sans-serif;"><strong>324,00 €</strong></span></td> </tr> <tr> <td class="serv-nomer" style=""><span style="font-family:verdana,geneva,sans-serif;">SER20:432,00</span> <br> &nbsp;</td> <td style="text-align:left;"><span class="en_us" style="">Certificate TR CU 004/020/2011 for 5 Years</span><span class="de_de" style="">Zertifikat TR CU 004/020/2011 für 5 Jahre</span></td> <td class="serv-price" style=""><span>432,00 €</span></td> <td style="">1,00</td> <td style=""><span style="font-family:verdana,geneva,sans-serif;"><strong>432,00 €</strong></span></td> </tr> <tr> <td class="serv-nomer" style=""><span style="font-family:verdana,geneva,sans-serif;">7:34,00</span> <br> &nbsp;</td> <td style="text-align:left;"><span class="en_us" style="">Declaration TR ZU 04/2011 for 5 Years</span><span class="de_de" style="">Deklaration TR ZU 04/2011 for 5 Jahre</span></td> <td class="serv-price" style=""><span>34,00 €</span></td> <td style="">1,00</td> <td style=""><span style="font-family:verdana,geneva,sans-serif;"><strong>34,00 €</strong></span></td> </tr> <tr> <td class="serv-nomer" style=""><span style="font-family:verdana,geneva,sans-serif;">:0,00</span> <br> &nbsp;</td> <td style="text-align:left;"><span class="en_us" style=""></span><span class="de_de" style=""></span></td> <td class="serv-price" style=""><span>0,00 €</span></td> <td style=""><span style="font-family:verdana,geneva,sans-serif;">0,00</span></td> <td style=""><span style="font-family:verdana,geneva,sans-serif;"><strong>0,00 €</strong></span></td> </tr> <tr> <td class="serv-nomer" style=""><span style="font-family:verdana,geneva,sans-serif;">9:23,00</span> <br> &nbsp;</td> <td style="text-align:left;"><span class="en_us" style="">Justification safety (GOST-Norm)</span><span class="de_de" style="">Begründung Sicherheit (GOST-Norm)</span></td> <td class="serv-price" style=""><span>23,00 €</span></td> <td style="">1,00</td> <td style=""><span style="font-family:verdana,geneva,sans-serif;"><strong>23,00 €</strong></span></td> </tr> <tr> <td class="serv-nomer" style=""><span style="font-family:verdana,geneva,sans-serif;">SER20:43,00</span> <br> &nbsp;</td> <td style="text-align:left;"><span class="en_us" style="">Certificate TR CU 004/020/2011 for 5 Years</span><span class="de_de" style="">Zertifikat TR CU 004/020/2011 für 5 Jahre</span></td> <td class="serv-price" style=""><span>43,00 €</span></td> <td style="">1,00</td> <td style=""><span style="font-family:verdana,geneva,sans-serif;"><strong>43,00 €</strong></span></td> </tr> <tr> <td colspan="4" style=""><span>Sub Total</span></td> <td><span>856,00 €</span></td> </tr> <tr> <td colspan="4" style=""><span style="font-family:verdana,geneva,sans-serif;">Discount</span></td> <td><span style="font-family:verdana,geneva,sans-serif;">0,00 €</span></td> </tr> <tr> <td colspan="4" style=""><span style="font-family:verdana,geneva,sans-serif;">Total</span></td> <td><span style="font-family:verdana,geneva,sans-serif;">856,00 €</span></td> </tr> <tr> <td colspan="4" style=""><strong>&nbsp;&nbsp;&nbsp;&nbsp; Grand Total</strong></td> <td style=""><span><span><strong>1343,92 €</strong></span></span> </td> </tr> </tbody> </table>

Answer 1

The issue is that

$(this).find('td').text()

will give you a single text for the entire row, not for individual td s. It's easy enough to check what it's doing with:

console.log($(this).find("td").text())

which will give, for the first row, something like:

:0,00       0,00 €  0,00    0,00 €

it looks like you're trying to find a single empty cell (rather than an empty row) - so you need to iterate individual td s.

One way is:

$('#table_serv tr td').each(function() { 
    if ($(this).text().trim() === '')
        $(this).parent().remove(); 
});

Answer 2

I guess in your example you want to remove first line, so that code should work. May be you can make it a bit shorter after some modifications.

$(document).ready(function(){
    $("tr").each(function(){
       $(this).children("td").each(function(){
           if($(this).text() === "")
           {
              $(this).parents("tr").remove();
           }        
       });
    });
});

Answer 3

The code was almost good! You just needed to loop the td as well.

 $('#table_serv tr').each(function(){ var tds = $(this).find('td'); tds.each(function(){ if ($(this).text() === ''){ $(this).parent().remove(); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table border="0" class="document-as" color="black" id="table_serv" style="font-size: 12px;border-right:0" width="100%"> <thead> <tr> <th style="text-align: center;color: white;font-weight: 600; width:5%"></th> <th style="text-align: left;color: white;font-weight: 600;width:35%;"><span style="font-family:verdana,geneva,sans-serif;"><span style="color:#000000;"><strong>Description</strong></span></span> </th> <th style="text-align: center;color: white;font-weight: 600;width:25%;"><span style="font-family:verdana,geneva,sans-serif;"><span style="color:#000000;"><strong>Selling Price</strong></span></span> </th> <th style="text-align: center;color: white;font-weight: 600;width:15%;"><span style="font-family:verdana,geneva,sans-serif;"><span style="color:#000000;"><strong>Quantity</strong></span></span> </th> <th style="text-align: center;color: white;font-weight: 600;width:15%"><span style="font-family:verdana,geneva,sans-serif;"><span style="color:#000000;"><strong>Total</strong></span></span> </th> </tr> </thead> <tbody> <tr> <td class="serv-nomer" style=""><span style="font-family:verdana,geneva,sans-serif;">:0,00</span> <br> &nbsp;</td> <td style="text-align:left;"><span class="en_us" style=""></span><span class="de_de" style=""></span></td> <td class="serv-price" style=""><span>0,00 €</span></td> <td style=""><span style="font-family:verdana,geneva,sans-serif;">0,00</span></td> <td style=""><span style="font-family:verdana,geneva,sans-serif;"><strong>0,00 €</strong></span></td> </tr> <tr> <td class="serv-nomer" style=""><span style="font-family:verdana,geneva,sans-serif;">9:324,00</span> <br> &nbsp;</td> <td style="text-align:left;"><span class="en_us" style="">Justification safety (GOST-Norm)</span><span class="de_de" style="">Begründung Sicherheit (GOST-Norm)</span></td> <td class="serv-price" style=""><span>324,00 €</span></td> <td style="">1,00</td> <td style=""><span style="font-family:verdana,geneva,sans-serif;"><strong>324,00 €</strong></span></td> </tr> <tr> <td class="serv-nomer" style=""><span style="font-family:verdana,geneva,sans-serif;">SER20:432,00</span> <br> &nbsp;</td> <td style="text-align:left;"><span class="en_us" style="">Certificate TR CU 004/020/2011 for 5 Years</span><span class="de_de" style="">Zertifikat TR CU 004/020/2011 für 5 Jahre</span></td> <td class="serv-price" style=""><span>432,00 €</span></td> <td style="">1,00</td> <td style=""><span style="font-family:verdana,geneva,sans-serif;"><strong>432,00 €</strong></span></td> </tr> <tr> <td class="serv-nomer" style=""><span style="font-family:verdana,geneva,sans-serif;">7:34,00</span> <br> &nbsp;</td> <td style="text-align:left;"><span class="en_us" style="">Declaration TR ZU 04/2011 for 5 Years</span><span class="de_de" style="">Deklaration TR ZU 04/2011 for 5 Jahre</span></td> <td class="serv-price" style=""><span>34,00 €</span></td> <td style="">1,00</td> <td style=""><span style="font-family:verdana,geneva,sans-serif;"><strong>34,00 €</strong></span></td> </tr> <tr> <td class="serv-nomer" style=""><span style="font-family:verdana,geneva,sans-serif;">:0,00</span> <br> &nbsp;</td> <td style="text-align:left;"><span class="en_us" style=""></span><span class="de_de" style=""></span></td> <td class="serv-price" style=""><span>0,00 €</span></td> <td style=""><span style="font-family:verdana,geneva,sans-serif;">0,00</span></td> <td style=""><span style="font-family:verdana,geneva,sans-serif;"><strong>0,00 €</strong></span></td> </tr> <tr> <td class="serv-nomer" style=""><span style="font-family:verdana,geneva,sans-serif;">9:23,00</span> <br> &nbsp;</td> <td style="text-align:left;"><span class="en_us" style="">Justification safety (GOST-Norm)</span><span class="de_de" style="">Begründung Sicherheit (GOST-Norm)</span></td> <td class="serv-price" style=""><span>23,00 €</span></td> <td style="">1,00</td> <td style=""><span style="font-family:verdana,geneva,sans-serif;"><strong>23,00 €</strong></span></td> </tr> <tr> <td class="serv-nomer" style=""><span style="font-family:verdana,geneva,sans-serif;">SER20:43,00</span> <br> &nbsp;</td> <td style="text-align:left;"><span class="en_us" style="">Certificate TR CU 004/020/2011 for 5 Years</span><span class="de_de" style="">Zertifikat TR CU 004/020/2011 für 5 Jahre</span></td> <td class="serv-price" style=""><span>43,00 €</span></td> <td style="">1,00</td> <td style=""><span style="font-family:verdana,geneva,sans-serif;"><strong>43,00 €</strong></span></td> </tr> <tr> <td colspan="4" style=""><span>Sub Total</span></td> <td><span>856,00 €</span></td> </tr> <tr> <td colspan="4" style=""><span style="font-family:verdana,geneva,sans-serif;">Discount</span></td> <td><span style="font-family:verdana,geneva,sans-serif;">0,00 €</span></td> </tr> <tr> <td colspan="4" style=""><span style="font-family:verdana,geneva,sans-serif;">Total</span></td> <td><span style="font-family:verdana,geneva,sans-serif;">856,00 €</span></td> </tr> <tr> <td colspan="4" style=""><strong>&nbsp;&nbsp;&nbsp;&nbsp; Grand Total</strong></td> <td style=""><span><span><strong>1343,92 €</strong></span></span> </td> </tr> </tbody> </table>

Answer 4

Here is a solution that I had to come up with a while back because I didn't want certain td's appearing in my table if they were empty. This does remove them and they aren't their anymore but this is an alternative you can do in your CSS text. The.td is a class so name it how you will, in my actual code I have it as.tddata

 .td:empty { display: none; height: 0; width: 0; padding: 0px; }