Question

I have the following HTML:

<table>
   <tr class="row">
        <td class="field">
            <input type="text" />
        </td>
        <td class="field">
            <input type="text" />
        </td>
        <td class="field">
            <input type="text" />
        </td>
   </tr>
   <tr>
   ...
   ...
   </tr>
</table>

I want to be able to hide the <tr> with the class="row" but only when the input within the <td> with the class="field" is empty when the page loads.

I’ve tried this, but it doesn’t work:

$('td.field:text[value=""]').parents('tr.row').hide();

However, for some reason, this DOES work:

$('td.field).parents('tr.row').hide();

(ie: it hides all of the rows with class="row")

Also, the following DOES work:

$('td.field:text[value=""]').val('test');

(ie: all empty inputs are populated with ‘test’ on page load)

I’m new to JQuery so I’m suspecting that I may have just misunderstood the way chaining works. can anyone give me any pointers? It semms like the two parts of what I am trying to do are correct when attempted separately, but don’t work together as one.

Answer 1

I think it should be in this way:

$('td.field :text[value=""]').parents('tr.row').hide();

The reason: :text (input) is child from td.field. If you put td.field:text it’s wrong because they are diferente selectors.