Jquery Hide table rows

Question

Hi there

I am hiding a bunch of textboxes and it works fine, the problem is, the textboxes are in a table, so I also need to hide the corresponding labels. the structure is something like this

<tr>
<td>
Label
</td>
<td>
InputFile
</td>
</tr>

in fact its just easier if I hide the rows that have a fileinput , can someone help please

Answer 1

If the label is in a table row you can do this to hide the row:

('.InputFile').parent().Hide()

You can refine your selector as you need and then get the table row that contains that element.

JQuery Selectors help: http://api.jquery.com/category/selectors/

EDIT This is the correct way to do it.

    ('.InputFile').parents('tr').hide()

Answer 2

$('.trhideclass1').hide();

might work...

<tr class="trhideclass1">
<td>
Label
</td>
<td>
InputFile
</td>
</tr>

Answer 3

You just need to traverse up the DOM tree to the nearest <tr> like so...

$("#ID_OF_ELEMENT").parents("tr").hide();

jQuery API Reference

Answer 4

$('inputFile').parent().parent().children('td > label').hide();

can help you navigate two levels up ( to TD, to TR ) moving two levels back down ( all TD's in that TR and their LABEL tags ), applying the hide() function there.

if you want to stay at the TR level and hide them:

$('inputFile').parent().parent().hide();

… is sufficient.

you can navigate very easily through the elements using the jquery selectors.

parent is documented here: http://api.jquery.com/parent/

hide is documented here: http://api.jquery.com/hide/

Answer 5

I think your best bet if you want both text field and label to hide simultaneously is assign each with a class and hide them like this:

jQuery(".labelClass, .inputClass").hide();