twitter bootstrap - Delete row by clicking button on cell using jquery -


i have table structure use construct table dynamically using jquery.

<table class="table table-hover" id="paper-table"><thead><tr><td><b>pubmed id</b></td><td><b>title</b></td><td><b>year</b></td><td><b>journal</b></td><td></td></tr></thead> <tbody>     <tr>     <td> id </td>     <td> title </td>     <td> year </td>     <td> journal </td>     <td><a href="#" class="delete-row"><span class="glyphicon glyphicon-trash"></span></a></td>     </tr> </tbody> <tfoot><tr><span id="table-title">paper</span></tr></tfoot></table> 

the last column of each row trashcan icon want make clickable delete row user clicks. table gets constructed correctly need jquery function allow me delete row. should check if table has no more rows after deleting 1 , delete table if there no more rows. looking @ other posts found delete table doing

$('#paper-table').on('click', 'a', function(){     $(this).closest('tr').remove(); }); 

but doesn't work when click trashcan icon. missing something?

the code link delete row in anchor tag wont delete table. if question how delete table have check if there no more rows , delete table e.g. -

$('#paper-table').on('click', 'a', function() {    $(this).closest('tr').remove();      //check if no more rows , remove table    if ($('#paper-table tbody tr').length == 0) {      $('#paper-table').remove();    }  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <table class="table table-hover" id="paper-table">    <thead>      <tr>        <td><b>pubmed id</b>        </td>        <td><b>title</b>        </td>        <td><b>year</b>        </td>        <td><b>journal</b>        </td>        <td></td>      </tr>    </thead>    <tfoot>      <tr>        <td><span id="table-title">footer</span>        </td>      </tr>    </tfoot>    <tbody>      <tr>        <td>id</td>        <td>title</td>        <td>year</td>        <td>journal</td>        <td><a href="#" class="delete-row">del</a>        </td>      </tr>      <tr>        <td>id</td>        <td>title</td>        <td>year</td>        <td>journal</td>        <td><a href="#" class="delete-row">del</a>        </td>      </tr>    </tbody>  </table>


Comments

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -