CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Arpit Gupta
Arpit Gupta

Reputation: 371

Delete button in not working on table

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>

Upvotes: 1

Views: 118

Answers (3)

Mohammed Elshennawy
Mohammed Elshennawy

Reputation: 967

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.

Upvotes: 1

Jishnu V S
Jishnu V S

Reputation: 8409

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>

Upvotes: 0

Parvez Rahaman
Parvez Rahaman

Reputation: 4397

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>

Upvotes: 0

Related Questions