title: Remove table row using jQuery
body: <p>The following is my code</p>
  
  <h3>Script</h3>
  
  <pre><code>$(document).ready(function(){
      $('#click').click(function(){
          $('#table').append('&lt;tr&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;');
      })
      $('#remove').click(function(){
          $('#table').remove('&lt;tr&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;');
      })
  })
  </code></pre>
  
  <h3>HTML</h3>
  
  <pre><code>&lt;table width="100%" border="1" cellspacing="0" cellpadding="0" id="table"&gt;
      &lt;tr&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;div id="click"&gt;click&lt;/div&gt;
  &lt;div id="remove"&gt;remove&lt;/div&gt;
  </code></pre>
  
  <p>When I add a row it works great, but I don't know how to delete the last row of the table. You can also check the online <a href="http://jsfiddle.net/2mZnR/" rel="noreferrer">demo</a>.</p>
  
  <p>How can I do this?</p>
  
  <p>In addition, I want when the user also clicks on any row it will delete itself. I have tried out, but there is a problem. If you click on the row it is deleting itself, but when you add a row by clicking in #click then the row is not deleting itself by clicking on it.</p>
  
  <p>Here is my code:</p>
  
  <h3>Script</h3>
  
  <pre><code>$(document).ready(function(){
      $('#click').click(function(){
          $('#table').append('&lt;tr&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;');
      })
      $('#remove').click(function(){
          $('#table tr:last').remove();
      })
      $('#table tr').click(function(){
          $(this).remove();
      });
  })
  </code></pre>