Delete empty row in html table

Question

How can I delete rows that are blank. I only managed remove a row using deleteRow() method, but I need to remove only empty ones.

<table  border="1">
        <tr>
            <td></td>
        </tr>
        <tr>
            <td>testing</td>         
        </tr>
        <tr>
            <td></td>           
        </tr>
    </table>

foreach($('table tr'), function(){ if($this.find('td').val()==''){ // your code here }}) — s_p
– s_p, Commented Jan 25, 2019 at 18:03
Show us your code and we will try to help you. One possible idea might be to check for $('tr').text()==''. — Carsten Massmann
– Carsten Massmann, Commented Jan 25, 2019 at 18:04

Web Nexus · Accepted Answer · 2019-01-25 18:12:39Z

3

Is this the sort of thing you are looking for?

What we are doing is getting all of the td checking if they are empty and then removing them if they do not have any text inside.

$("td").each(function() {
    if (this.innerText === '') {
    	this.closest('tr').remove();
    }
});

td {
  height: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <td></td>
  </tr>
  <tr>
    <td>123</td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td>456</td>
  </tr>
</table>

edited Jan 25, 2019 at 18:12

answered Jan 25, 2019 at 18:07

Web Nexus

1,14811 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

robertspierre Over a year ago

This will delete the row if just one of its cell is empty, not if and only if everyone of its cell is empty, right?

gaetanoM · Accepted Answer · 2019-01-25 18:10:18Z

1

Instead of deleteRow() you can use removeChild():

document.querySelectorAll('table tr').forEach(function(e, i) {
    if (e.textContent.trim().length == 0) { // if row is empty
        e.parentNode.removeChild(e);
    }
})


// in jQuery: 
//$('table tr').filter((i, e) => e.textContent.trim().length == 0).remove();

<table  border="1">
    <tr>
        <td></td>
    </tr>
    <tr>
        <td>testing</td>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

answered Jan 25, 2019 at 18:10

gaetanoM

42.1k6 gold badges45 silver badges63 bronze badges

1 Comment

Rokki balboa Over a year ago

Great. Thank you

Collectives™ on Stack Overflow

Delete empty row in html table

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related