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 but only if a all its s are blank. The

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

Answer 2

If you want to use each, you can do it like:

$('#table1 tr').each(function() {
    if ($(this).find('td:empty').length) $(this).remove();
});​

jsFiddle example