Delete HTML table rows with jQuery
<p>I have an HTML table in which rows can be added dynamically by button click(Also done with jQuery). What I want now is,I need to have a button by the side of each row. Pressing it would delete that particular row. </p>

<p>The table is as follows. </p>

<pre><code>&lt;tr class="item-row"&gt;
         &lt;td class="item-name"&gt;
          &lt;div class="delete-wpr"&gt;&lt;textarea&gt;&lt;/textarea&gt;&lt;a class="delete" href="javascript:;" title="Remove row"&gt;X&lt;/a&gt;&lt;/div&gt;&lt;/td&gt;

           &lt;td&gt;&lt;input type="text" class="slno"/&gt;&lt;/td&gt;           

          &lt;td&gt;&lt;input type="text" class="cost"/&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type="text" class="qty"/&gt;&lt;/td&gt;
          &lt;td&gt;&lt;span class="price"&gt;&lt;/span&gt;&lt;/td&gt;
      &lt;/tr&gt;  
</code></pre>

<p>The Jquery to add more rows is as follows.</p>

<pre><code> $("#addrow").click(function(){
$(".item-row:last").after('&lt;tr class="item-row"&gt;&lt;td class="item-name"&gt;&lt;div class="delete-wpr"&gt;&lt;input type="text" class="slno"/&gt;&lt;a class="delete" href="javascript:;" title="Remove row"&gt;X&lt;/a&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" class="slno"/&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" class="cost"/&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" class="qty"/&gt;&lt;/td&gt;&lt;td&gt;&lt;span class="price"&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt; ');
</code></pre>

<p>The function I am using is this. But it's not working.</p>

<pre><code>$(".delete").on('click',function(){
$(this).parents('.item-row').remove();
update_total();
if ($(".delete").length &lt; 2) $(".delete").hide();
  });
</code></pre>

<p>So how do I do this?</p>