Hide table row if one of its columns is empty using CSS [duplicate]

Question

Possible Duplicate:
hide row if it contains empty columns

Can the row containing empty cell in this table be hidden using CSS.. I have tried jQuery and its not working right now.. this is what I used and it doesn't do anything!

$('.EventDetail tr').each(function(){      
    if ($('td:empty',this).length > 0))
    $(this).hide();
});

There ain't nothing wrong with this piece of jQuery, is there? I would like to see if we can do display:none for the selected row? Is it something achievable using CSS?

<table cellpadding="10" class ="EventDetail">
    <tr>
        <td class="TableFields"><em>Who Should Enroll?:</em></td>
        <td>Everyone 18 and older who would like to attend</td>
    </tr>       
    <tr>
        <td class="TableFields"><em>Handicapped Access:</em></td>
        <td>Yes</td>
    </tr>
    <tr>
        <td class="TableFields"><em>Parking Notes:</em></td>
        <td></td>
    </tr>
    <tr>
        <td class="TableFields"><em>Instructor:</em></td>
        <td>John Filler</td>
    </tr>
</table>

Answer 1

This selector should do it...

$('.EventDetail tr:has(td:empty)').hide();

jsFiddle.

The :empty selector looks for elements with no child nodes. If it is possible you may have whitespace there, but you still consider it empty, try something such as...

$('.EventDetail tr').filter(function() {
    return $(this).find('td').filter(function() {
      return ! $.trim($(this).text());  
    }).length;
}).hide();

jsFiddle.