Solution can use jQuery or be plain JavaScript.
I want to remove a table row after user has clicked the corresponding button contained in the table row cell so for example:
<script> function SomeDeleteRowFunction() { //no clue what to put here? } </script> <table> <tr> <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td> </tr> <tr> <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td> </tr> <tr> <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td> </tr> </table>
jQuery: Code to Remove Table Row (tr) on Button Click. Here, we make a jQuery click event on the button tag. Using the closest() method we select the current row ie closest tr of our delete button, and then with the remove() method will delete that record. Similarly for deleting the next row tr we use .
Delete a row or column Select a row or column that you want to delete. Press Backspace, or select the Table Tools Layout tab >Delete, and then select an option. Note: In Excel, select a row or column that you want to delete, right-click and select Delete , and choose the option you want.
Delete row from a table, deleteRow(id), remove() or use useState () in Reactjs.
The Table deleteRow() method is used for removing a <tr> element from a table. In other words, Table deleteRow() method is used for deleting row(s) at the specified index in the table. index :It is used to specify the position of the row to be deleted.
You can use jQuery click
instead of using onclick
attribute, Try the following:
$('table').on('click', 'input[type="button"]', function(e){ $(this).closest('tr').remove() })
Demo
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With