Hiding divs in a given section based on empty child form input values
<p>I have a form with a containing div structure like this:</p>

<pre><code>&lt;form id="baseform"&gt;
    &lt;div class="container"&gt;
     &lt;div class="subheader"&gt;&lt;h2&gt;Section 1&lt;/h2&gt;&lt;/div&gt;
     &lt;div class="row"&gt;
        &lt;textarea id=T_01&gt;&lt;/textarea&gt;  
        &lt;input id="T_02" type="text" /&gt;
     &lt;/div&gt;
     &lt;div class="row"&gt;
        [more form fields]
     &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="container"&gt;
     &lt;div class="subheader"&gt;&lt;h2&gt;Section 2&lt;/h2&gt;&lt;/div&gt;        
       &lt;div class="row"&gt;[more form field, etc.]
     &lt;/div&gt;
   &lt;/form&gt;
</code></pre>

<p>I want to hide those with empty form inputs <code>.row</code> divs beneath the <code>.subheader</code> on <code>document ready</code> (I already am using <code>toggle()</code> to show <code>.row</code> divs beneath the <code>.subheader</code> on <code>click</code>).</p>

<p>It seems like something like this should work:</p>

<pre><code>$(document).ready(function() {
    $('.row :input[@value=""]').parent('.subheader').nextAll('.row').hide();
});
</code></pre>

<p>But no dice. Ideas?</p>
