Hide row ... from column

Question

Hello,

I have this

<table>
<tr>
    <td>...</td>
    <td>...</td>
    <td class="Data">...</td>
</tr>
<tr>
    <td>...</td>
    <td>...</td>
    <td class="noData">...</td>
</tr>
<tr>
    <td>...</td>
    <td>...</td>
    <td class="noData">...</td>
</tr>
</table>

with jQuery, when a row (tr) has a column (td) with class "noData", I'd like hide the complete row the result on this table will be

<table>
<tr>
    <td>...</td>
    <td>...</td>
    <td class="Data">...</td>
</tr>
</table>

Thanks,

Answer 1

You may try below code:

$(document).ready(function()
{
 $("td.noData").parent().hide("fast");
});

Or you may want to use remove() instead of hide() above or even below code:

$(document).ready(function()
{
 $("td.noData").parent().css('display':'none');
});

Answer 2

To get a list of the tr's that contain TD's with no data simply call:

$("tr:has(> td.noData)")

Once you have that it's trivial to hide it (just add a .hide() to the end).

The relevant selectors are the Has selector and the parent>child selector.

Answer 3

While sarfraz's solution works, I think this code makes a closer analog to the problem description, which is a good thing for readability and later understanding.

$("tr:has(>td.noData)").hide();