Remove table row using jQuery
jquery
Solution
If you want to remove the last table row of `#table`, you need to target it with your selector, and then call `$.remove()` against it:
$('#remove').on("click", function(){
$('#table tr:last').remove();
})
Problem
The following is my code Script ``` $(document).ready(function(){ $('#click').click(function(){ $('#table').append('<tr><td> </td></tr>'); }) $('#remove').click(function(){ $('#table').remove('<tr><td> </td></tr>'); }) }) ``` HTML ``` <table width="100%" border="1" cellspacing="0" cellpadding="0" id="table"> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table> <div id="click">click</div> <div id="remove">remove</div> ``` 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 demo. How can I do this? 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. Here is my code: Script ``` $(document).ready(function(){ $('#click').click(function(){ $('#table').append('<tr><td> </td></tr>'); }) $('#remove').click(function(){ $('#table tr:last').remove(); }) $('#table tr').click(function(){ $(this).remove(); }); }) ```