title: Delete row by clicking button on cell using jquery
body: <p>I have this table structure that I use to construct a table dynamically using jQuery.</p>
  
  <pre><code>&lt;table class="table table-hover" id="paper-table"&gt;&lt;thead&gt;&lt;tr&gt;&lt;td&gt;&lt;b&gt;Pubmed ID&lt;/b&gt;&lt;/td&gt;&lt;td&gt;&lt;b&gt;Title&lt;/b&gt;&lt;/td&gt;&lt;td&gt;&lt;b&gt;Year&lt;/b&gt;&lt;/td&gt;&lt;td&gt;&lt;b&gt;Journal&lt;/b&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/thead&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
      &lt;td&gt; id &lt;/td&gt;
      &lt;td&gt; title &lt;/td&gt;
      &lt;td&gt; year &lt;/td&gt;
      &lt;td&gt; journal &lt;/td&gt;
      &lt;td&gt;&lt;a href="#" class="delete-row"&gt;&lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;tfoot&gt;&lt;tr&gt;&lt;span id="table-title"&gt;Paper&lt;/span&gt;&lt;/tr&gt;&lt;/tfoot&gt;&lt;/table&gt;
  </code></pre>
  
  <p>The last column of each row is a trashcan icon that I want to make clickable to delete the row where the user clicks. The table gets constructed correctly but I need a jQuery function that will allow me to delete the row. Also it should check if the table has no more rows after deleting one and delete the table if there are no more rows. Looking at some other posts I found that I could delete the table by doing something like this </p>
  
  <pre><code>$('#paper-table').on('click', 'a', function(){
      $(this).closest('tr').remove();
  });
  </code></pre>
  
  <p>But it doesn't work when I click the trashcan icon. Am I missing something?</p>