empty tbody on click
<p>I am trying to empty all the rows inside the tbody on click of a new row. This is the javascript i am using:</p>

<pre><code>$('#pro tr').click(function() {
    $('#pro_basket &gt; tbody').empty();
        $.ajax({
            type: "post", url: "data.php", data: "index="+index,
            success: function(data) {
            $('#pro_basket &gt; tbody').after(data);
        }
    });
});
</code></pre>

<p>My table markup is simple:</p>

<pre><code>&lt;table id='pro_basket'&gt;
   &lt;thead&gt;
       &lt;th&gt;Column 1&lt;/th&gt;
       &lt;th&gt;Column 2&lt;/th&gt;
   &lt;/thead&gt;
   &lt;tbody&gt;
   &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p>I want to empty the rows that exist in pro_basket but <code>$('#pro_basket &gt; tbody').empty();</code> isn't really helping.</p>
