Delete button in not working on table

Arpit Gupta

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>

Mohammed Elshennawy

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.