stackoom
  简体   繁体   中英

Delete button in not working on table

 原文  2017-02-01 06:08:14  7   3    javascript/ jquery/ html/ css

Question

I have created a table where delete/erase button is not working for me. I have tried my best but its not working for me.Please help me how can i make this erase button workable . 

 $(".butnBorrar").click(function(event) { $("#table125").each(function() { $(this).closest('tds').remove(); }); }); $("#insert15").click(function() { $("#table125").each(function() { var tds = '<tr>'; jQuery.each($('tr:last td', this), function() { tds += '<td>' + $(this).html() + '</td>'; }); tds += '</tr>'; if ($('tbody', this).length > 0) { $('tbody', this).append(tds); } else { $(this).append(tds); } }); });
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <table id="table125" class="table table-bordered table-hover"> <input type="button" class="btn green" value="Add New+" id="insert15"></input> <thead> <th>Subject</th> <th>Marks</th> </thead> <tbody> <tr> <td> <input type="text" class="form-control subject1" name="subject1"> </td>&nbsp;&nbsp;&nbsp;&nbsp; <td> <input type="text" class="form-control marks1 allownumericwithoutdecimal" name="marks1"> </td> <td class="total"> <button type="button" class="butnBorrar"> Erase </button> </td> </tr> </tbody> </table>

3 answers

solution1
 1 ACCPTED  2017-02-01 06:28:16

Here is a fully working example:-

Note-> This Technique in handling click called event bubbling which used in case of adding Dynamic HTML to your page. 

 $(document).on('click','.butnBorrar',function(event) { //console.log('clicked'); $(this).closest('tr').remove(); }); var template = $('#table125 > tbody:last-child').html(); $("#insert15").click(function() { $('#table125 > tbody:last-child').append(template); });
 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <table id="table125" class="table table-bordered table-hover"> <input type="button" class="btn green" value="Add New+" id="insert15"></input> <thead> <th>Subject</th> <th>Marks</th> </thead> <tbody> <tr> <td> <input type="text" class="form-control subject1" name="subject1"> </td>&nbsp;&nbsp;&nbsp;&nbsp; <td> <input type="text" class="form-control marks1 allownumericwithoutdecimal" name="marks1"> </td> <td class="total"> <button type="button" class="butnBorrar"> Erase </button> </td> </tr> </tbody> </table> </body> </html>

Hope it helps.

solution2
 0  2017-02-01 06:13:06

You need to do like this

$(document).on('click', '.butnBorrar', function(event) {

  $(this).parent().parent().remove();

  // OR

  $(this).closest('tr').remove();

});


 $(document).on('click', '.butnBorrar', function(event) { //$("#table125").each(function() { $(this).parent().parent().remove(); //or //$(this).closest('tr').remove(); //}); }); $("#insert15").click(function() { $("#table125").each(function() { var tds = '<tr>'; jQuery.each($('tr:last td', this), function() { tds += '<td>' + $(this).html() + '</td>'; }); tds += '</tr>'; if ($('tbody', this).length > 0) { $('tbody', this).append(tds); } else { $(this).append(tds); } }); });
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="table125" class="table table-bordered table-hover"> <input type="button" class="btn green" value="Add New+" id="insert15"></input> <thead> <th>Subject</th> <th>Marks</th> </thead> <tbody> <tr> <td> <input type="text" class="form-control subject1" name="subject1"> </td>&nbsp;&nbsp;&nbsp;&nbsp; <td> <input type="text" class="form-control marks1 allownumericwithoutdecimal" name="marks1"> </td> <td class="total"> <button type="button" class="butnBorrar"> Erase </button> </td> </tr> </tbody> </table>

solution3
 0  2017-02-01 06:20:57

You should use the $(document).on('click', '.butnBorrar' instead:

$(document).on('click', '.butnBorrar' , function(event) {
   $(this).closest('tr').remove();
});

This way jQuery listens for click events on the document, and if the target element is .butnBorrar (for example) - the function will be triggered. It doesn't matter if the elements are added dynamically - the click event is always on the document, and jQuery will check the target element (and act accordingly).

Here is the update to your snippet: 

 $(function(){ $(document).on('click', '.butnBorrar' , function(event) { $(this).closest('tr').remove(); }); $("#insert15").click(function() { $("#table125").each(function() { var tds = '<tr>'; jQuery.each($('tr:last td', this), function() { tds += '<td>' + $(this).html() + '</td>'; }); tds += '</tr>'; if ($('tbody', this).length > 0) { $('tbody', this).append(tds); } else { $(this).append(tds); } }); }); });
 <table id="table125" class="table table-bordered table-hover"> <input type="button" class="btn green" value="Add New+" id="insert15"></input> <thead> <th>Subject</th> <th>Marks</th> </thead> <tbody> <tr> <td> <input type="text" class="form-control subject1" name="subject1"> </td>&nbsp;&nbsp;&nbsp;&nbsp; <td> <input type="text" class="form-control marks1 allownumericwithoutdecimal" name="marks1"> </td> <td class="total"> <button type="button" class="butnBorrar"> Erase </button> </td> </tr> </tbody> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

暂无
暂无

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 Bootstrap jQuery dynamic table edit/delete/view button not working Delete button in table, jQuery Delete button keyCode not working Delete button not working in CodeIgniter How to delete Row in table on 'Delete' button JQuery - Delete table row if delete button is clicked Delete button in For loop table content Delete a specific button in a table in js Add/Delete table row with button Delete a button from a table in javascript
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM