How do I find the nearest tbody then loop through its rows and hide them
<p>I have a table that is split up into several tbody's. The first row in each tbody has a button which will be used to hide all other rows in this tbody apart from the row with the button in it. </p>

<p>Not sure how to achieve this.</p>

<p>My HTML :</p>

<pre><code>&lt;table&gt;
   &lt;tbody&gt;
       &lt;tr&gt;
           &lt;td&gt;&lt;button class="hide_button_main"&gt; x &lt;/button&gt;&lt;/td&gt;
           &lt;td&gt;Label&lt;/td&gt;
       &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;Zone 1&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;Zone 2&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt; 
        &lt;tr&gt;
            &lt;td&gt;Zone 3&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt; 
       &lt;tr&gt;
            &lt;td&gt;Zone 4&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt; 
   &lt;/tbody&gt;
</code></pre>

<p>Rows with zones 1 to 4 would be hidden but not the row with the label in it</p>

<p>My Jquery:</p>

<pre><code>     $('.hide_button_main').click(function(e) {

   // var rows = $(this).closest('tbody').find('tr').length;

    var rows = $(this).closest('tbody');

        rows.each(function() {

      alert('1');

    });


});
</code></pre>
