How to remove the row in a table when clicked on “delete icon” using javascript/jquery?
Question
$(document).on("click", ".deleteIcon", function () { indexDelAgent = parseInt($(this).attr("alt").replace("Delete", "")); console.log("after deletion"); console.log(indexDelAgent); document.getElementById("tempTable").deleteRow(indexDelAgent); });
<!DOCTYPE html> <html> <head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <title></title> </head> <body> <table class="table table-bordered" id="tempTable"> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> </tr> </thead> <tbody> <tr> <td> <select> <option value="1">QQ</option> <option value="2">Apple</option> <option value="3">Orange</option> <option value="4">Mango </option> </select> </td> <td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason4" required=""></td> <td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount4" required=""></td> <td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty4" required=""></td> <td><i value="Delete" type="button" alt="Delete4" class="deleteIcon fa fa-trash"></i></td> </tr> <tr> <td> <select> <option value="1">QQ</option> <option value="2">Apple</option> <option value="3">Orange</option> <option value="4">Mango </option> </select> </td> <td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason5" required=""></td> <td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount5" required=""></td> <td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty5" required=""></td> <td><i value="Delete" type="button" alt="Delete5" class="deleteIcon fa fa-trash"></i></td> </tr> <tr> <td> <select> <option value="1">QQ</option> <option value="2">Apple</option> <option value="3">Orange</option> <option value="4">Mango </option> </select> </td> <td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason6" required=""></td> <td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount6" required=""></td> <td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty6" required=""></td> <td><i value="Delete" type="button" alt="Delete6" class="deleteIcon fa fa-trash"></i></td> </tr> </tbody> </table> </body> </html>
My table is dynamic,as It has the button to add the new row and the index gets increased with 0,1,2,3,4 after clicking on "Add new" button.(I have not shown that button here,I have only shown 3 rows here and index of table starting from 4).I need to delete the entire row when I click on delete icon of that row.I tried using the jquery by document.getElementById("tempTable").deleteRow(indexDelAgent); ,but it is not working. I dont want my table data to be pushed in any array.I just need to remove the entire row on clicking delete icon.
2 answers
solution1
2 ACCPTED 2019-03-13 06:00:14
In your current code alt value starts with Delete4 but there is no row at index 4 so it won't work as you expected.
To work in your current scenario you need to get an index among the remaining rows. You can get the index among the delete button simply using index() method, but you have to add 1 (to skip header) since there is no delete button inside the header.
$(document).on("click", ".deleteIcon", function() { var indexDelAgent = $(this).index('.deleteIcon') + 1; console.log("after deletion"); console.log(indexDelAgent); document.getElementById("tempTable").deleteRow(indexDelAgent); });
<!DOCTYPE html> <html> <head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <title></title> </head> <body> <table class="table table-bordered" id="tempTable"> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> </tr> </thead> <tbody> <tr> <td> <select> <option value="1">QQ</option> <option value="2">Apple</option> <option value="3">Orange</option> <option value="4">Mango </option> </select> </td> <td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason4" required=""></td> <td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount4" required=""></td> <td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty4" required=""></td> <td><i value="Delete" type="button" alt="Delete4" class="deleteIcon fa fa-trash"></i></td> </tr> <tr> <td> <select> <option value="1">QQ</option> <option value="2">Apple</option> <option value="3">Orange</option> <option value="4">Mango </option> </select> </td> <td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason5" required=""></td> <td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount5" required=""></td> <td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty5" required=""></td> <td><i value="Delete" type="button" alt="Delete5" class="deleteIcon fa fa-trash"></i></td> </tr> <tr> <td> <select> <option value="1">QQ</option> <option value="2">Apple</option> <option value="3">Orange</option> <option value="4">Mango </option> </select> </td> <td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason6" required=""></td> <td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount6" required=""></td> <td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty6" required=""></td> <td><i value="Delete" type="button" alt="Delete6" class="deleteIcon fa fa-trash"></i></td> </tr> </tbody> </table> </body> </html>
UPDATE : Or far better way is to get the index of parent tr among all tr .
$(document).on("click", ".deleteIcon", function() { var indexDelAgent = $(this).closest('tr').index('#tempTable tr'); console.log("after deletion"); console.log(indexDelAgent); document.getElementById("tempTable").deleteRow(indexDelAgent); });
<!DOCTYPE html> <html> <head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <title></title> </head> <body> <table class="table table-bordered" id="tempTable"> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> </tr> </thead> <tbody> <tr> <td> <select> <option value="1">QQ</option> <option value="2">Apple</option> <option value="3">Orange</option> <option value="4">Mango </option> </select> </td> <td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason4" required=""></td> <td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount4" required=""></td> <td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty4" required=""></td> <td><i value="Delete" type="button" alt="Delete4" class="deleteIcon fa fa-trash"></i></td> </tr> <tr> <td> <select> <option value="1">QQ</option> <option value="2">Apple</option> <option value="3">Orange</option> <option value="4">Mango </option> </select> </td> <td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason5" required=""></td> <td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount5" required=""></td> <td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty5" required=""></td> <td><i value="Delete" type="button" alt="Delete5" class="deleteIcon fa fa-trash"></i></td> </tr> <tr> <td> <select> <option value="1">QQ</option> <option value="2">Apple</option> <option value="3">Orange</option> <option value="4">Mango </option> </select> </td> <td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason6" required=""></td> <td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount6" required=""></td> <td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty6" required=""></td> <td><i value="Delete" type="button" alt="Delete6" class="deleteIcon fa fa-trash"></i></td> </tr> </tbody> </table> </body> </html>
solution2
0 2019-03-13 05:51:05
Since you are using jQuery use remove() method to remove an element from DOM.
$(document).on("click", ".deleteIcon", function() { // get the parent tr element and remove $(this).closest('tr').remove(); });
<!DOCTYPE html> <html> <head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <title></title> </head> <body> <table class="table table-bordered" id="tempTable"> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> </tr> </thead> <tbody> <tr> <td> <select> <option value="1">QQ</option> <option value="2">Apple</option> <option value="3">Orange</option> <option value="4">Mango </option> </select> </td> <td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason4" required=""></td> <td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount4" required=""></td> <td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty4" required=""></td> <td><i value="Delete" type="button" alt="Delete4" class="deleteIcon fa fa-trash"></i></td> </tr> <tr> <td> <select> <option value="1">QQ</option> <option value="2">Apple</option> <option value="3">Orange</option> <option value="4">Mango </option> </select> </td> <td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason5" required=""></td> <td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount5" required=""></td> <td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty5" required=""></td> <td><i value="Delete" type="button" alt="Delete5" class="deleteIcon fa fa-trash"></i></td> </tr> <tr> <td> <select> <option value="1">QQ</option> <option value="2">Apple</option> <option value="3">Orange</option> <option value="4">Mango </option> </select> </td> <td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason6" required=""></td> <td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount6" required=""></td> <td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty6" required=""></td> <td><i value="Delete" type="button" alt="Delete6" class="deleteIcon fa fa-trash"></i></td> </tr> </tbody> </table> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How do I insert a “remove button” to every table row when inserting a new row using javascript/jQuery
How do you remove a parent table row when child "delete" button is clicked in React JS?
JQuery - Delete table row if delete button is clicked
Remove html table row using javascript or jquery?
How to delete a row in the table when I click on a button? Using Javascript
How to get row value from table when delete button is clicked?
Delete a table row with javascript / jquery
Delete row is working when clicked twice in jQuery
How to delete a gridview row using Javascript or jQuery
How to delete table row using Javascript
Related Tags