Add and Remove Rows Table with Jquery

Question

It's almost done, but I don't know why it doesn't work the way it's supposed to. The functionality is simple, add a row with a click on the last row and delete a row with a button on the left.

Adding works fine, removing too, but when you delete the last row you can't add again. Can you help me guys? This is the code:

$(document).ready(function() {

  //Add Button
  $(".fa-plus").click(function() {
    var idTable = $(this).closest('table').attr('id');
    $('#' + idTable + ' tbody>tr:last').clone(true).insertAfter('#' + idTable + ' tbody>tr:last');
    //$('#' + idTable + ' tbody>tr:last #name').val('');
    $(this).replaceWith('');
    return false;
  });

  //Delete Butotn
  $(".fa-trash").click(function() {
    var idTable = $(this).closest('table').attr('id');

    var rowCount = $('#' + idTable + ' tr').length;
    if (rowCount > 2) {
      // If is the last Row
      if (!$(this).closest('tr').next().length) {
        $(this).closest("tr").remove();
        $('#' + idTable + ' tbody>tr:last #add').append("<i class='fa fa-plus fa-lg text-primary'></i>");
      } else {
        $(this).closest("tr").remove();
      }
    } else {
      alert('Dont delete the only row');
    }


  });

});

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tbl_PilotOption" class="table table-bordered table-striped" style=" width: 100%;">
  <thead>
    <tr>
      <th style="width:46px;"></th>
      <th></th>
      <th style="width: 35%;"></th>
      <th style="width:46px;"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="text-center" width="30px"><a id="delete"><i class="fa fa-trash ml-2"></i></a></td>
      <td><input class="form-control" /></td>
      <td><input class="form-control" /></td>
      <td><a href="#" id="add"><i class="fa fa-plus fa-lg text-primary"></i></a></td>
    </tr>

  </tbody>
</table>

you can refer this link https://stackoverflow.com/q/203198/4964569 — Hien Nguyen, Mar 31 '20 at 01:24
It fails to add a row after deleting all the rows because your add function works by cloning the last row in the table. Since you deleted all rows, it couldn't clone an existing row anymore. — Victor, Mar 31 '20 at 01:30

score 0 · Accepted Answer · answered Mar 31 '20 at 01:20

The problem is that when you remove the row, you also remove the click handler. So instead of $(".fa-plus").click(function() {... use $('table').on("click", ".fa-plus", function() {....

$(document).ready(function() {

  //Add Button
  $('table').on("click", ".fa-plus", function() {
    var idTable = $(this).closest('table').attr('id');
    $('#' + idTable + ' tbody>tr:last').clone(true).insertAfter('#' + idTable + ' tbody>tr:last');
    //$('#' + idTable + ' tbody>tr:last #name').val('');
    $(this).replaceWith('');
    return false;
  });

  //Delete Butotn
  $(".fa-trash").click(function() {
    var idTable = $(this).closest('table').attr('id');

    var rowCount = $('#' + idTable + ' tr').length;
    if (rowCount > 2) {
      // If is the last Row
      if (!$(this).closest('tr').next().length) {
        $(this).closest("tr").remove();
        $('#' + idTable + ' tbody>tr:last #add').append("<i class='fa fa-plus fa-lg text-primary'></i>");
      } else {
        $(this).closest("tr").remove();
      }
    } else {
      alert('Dont delete the only row');
    }


  });

});

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tbl_PilotOption" class="table table-bordered table-striped" style=" width: 100%;">
  <thead>
    <tr>
      <th style="width:46px;"></th>
      <th></th>
      <th style="width: 35%;"></th>
      <th style="width:46px;"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="text-center" width="30px"><a id="delete"><i class="fa fa-trash ml-2"></i></a></td>
      <td><input class="form-control" /></td>
      <td><input class="form-control" /></td>
      <td><a href="#" id="add"><i class="fa fa-plus fa-lg text-primary"></i></a></td>
    </tr>

  </tbody>
</table>

Add and Remove Rows Table with Jquery

1 Answers1