Run
<!doctype html> <html lang="en"> <head> <title>jQuery Delete Table Rows Dynamically</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <style> table.myTableDelete{ width: 100%; border-collapse: collapse; margin-top:20px; } table.myTableDelete th, table.myTableDelete td{ border: 1px solid #cdcdcd; padding: 7px; } </style> <script> $(document).ready(function(){ $('.btndeleterow').click(function(){ $(this).closest('tr').remove(); }); }); </script> </head> <body> <h2>jQuery Delete Table Rows Dynamically</h2> <p>Click the cross(X) sign button to remove the unwanted rows of a table.</p> <table class="myTableDelete"> <thead> <tr> <th>Team Name</th> <th>Cricketer Name</th> <th>Score</th> <th>Delete</th> </tr> </thead> <tbody> <tr> <td>West Indies</td> <td>Chris Gayle</td> <td>195</td> <td><button type="button" class="btndeleterow" >x</button></td> </tr> <tr> <td>India</td> <td>Virat Kohli</td> <td>124</td> <td><button type="button" class="btndeleterow">x</button></td> </tr> <tr> <td>Australia</td> <td>David Warner</td> <td>167</td> <td><button type="button" class="btndeleterow">x</button></td> </tr> <tr> <td>South Africa</td> <td>AB De Villier's</td> <td>185</td> <td><button type="button" class="btndeleterow">x</button></td> </tr> </tbody> </table> </body> </html>
Go to
Tutorialdeep Homepage