hide table row if all tds are empty

Question

Is there an easy way to do this without a each loop.

I want to hide the entire <tr> but only if a all its <td>s are blank. The table is dynamically generated so the blank rows could be any where.

$('#table1 tr:has(td):empty').remove();

HTML

<table id="table1">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr >
<td></td>
<td></td>
<td></td>
</tr>
...
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>

Answer 1

I'd suggest, although this still, implicitly, examines each of the tr elements:

$('tr').filter(
    function(){
        return $(this).find('td').length == $(this).find('td:empty').length;
    }).hide();

JS Fiddle demo.

This is, with quite some cross-browser difficulties, sort of possible in CSS, using the :not() and :empty pseudo-selectors:

tr td:empty {
    visibility: hidden;
    height: 0;
}

​td:not(:empty) ~ td:empty {
    visibility: visible;
    height: 100%;
}​

JS Fiddle demo.

References:

• jQuery:
  • :empty (jQuery) selector.
  • filter().
  • find().
• CSS:
  • :empty.
  • General sibling ~ combinator.
  • :not().