Add, remove row from table using jquery

Question

According to my code I have 2 tables. On click of 'add' the whole row will append to the next table and on click of 'delete' it will append to the first table.

The code which I wrote works fine but I have a weird error on adding all rows or deleting all rows multiple times, as it will stop working. I am not able to figure out the issue.

$(".addRow").on("click", function() {
  var $delete = '<h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4>';
  var $clone = $(this).parent().parent();
  $clone.find(".addRow").remove();
  $clone.find("td:eq(0)").append($delete);
  $(".selected table").append($clone);
  $(".deleteRow").on("click", function() {
    var $add = '<h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4>';
    var newClone = $(this).parent().parent();
    newClone.find(".deleteRow").remove();
    newClone.find("td:eq(0)").append($add);
    $(".available table").append(newClone);
  });
});

$(".deleteRow").on("click", function() {
  var $add = '<h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4>';
  var newClone = $(this).parent().parent();
  newClone.find(".deleteRow").remove();
  newClone.find("td:eq(0)").append($add);
  $(".available table").append(newClone);
  $(".addRow").on("click", function() {
    var $delete = '<h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4>';
    var $clone = $(this).parent().parent();
    $clone.find(".addRow").remove();
    $clone.find("td:eq(0)").append($delete);
    $(".selected table").append($clone);
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-lg-4 col-md-4 col-lg-offset-2 col-md-offset-2 available">
    <label>Available Members</label>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>
            <h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4>
          </td>
          <td>
            <h6>Cab Swift Two</h6>
          </td>
        </tr>
        <tr>
          <td>
            <h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4>
          </td>
          <td>
            <h6>Dharma</h6>
          </td>
        </tr>
        <tr>
          <td>
            <h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4>
          </td>
          <td>
            <h6>Sahoo</h6>
          </td>
        </tr>
        <tr>
          <td>
            <h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4>
          </td>
          <td>
            <h6>Majhi</h6>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="col-lg-4 col-md-4 selected">
    <label>Selected Members</label>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>
            <h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4>
          </td>
          <td>
            <h6>Shantanu</h6>
          </td>
        </tr>
        <tr>
          <td>
            <h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4>
          </td>
          <td>
            <h6>Android</h6>
          </td>
        </tr>
        <tr>
          <td>
            <h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4>
          </td>
          <td>
            <h6>ios</h6>
          </td>
        </tr>
        <tr>
          <td>
            <h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4>
          </td>
          <td>
            <h6>Windows</h6>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Here is the working fiddle

check in fiddle, try to add all and then delete all few times, it will stop working after that. — Atal Shrivastava
– Atal Shrivastava, Commented Feb 28, 2017 at 9:34

RonyLoud · Accepted Answer · 2017-02-28 09:48:49Z

6

bind event to document and not to table row, as after removing element, bound event is also deleted.

$(document).on('click','.addRow'

refer updated fiddle

edited Feb 28, 2017 at 9:48

RonyLoud

2,4362 gold badges23 silver badges27 bronze badges

answered Feb 28, 2017 at 9:38

Anil

3,7522 gold badges27 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Atal Shrivastava Over a year ago

Thanks a lot, Nice and simple

Rory McCrossan · Accepted Answer · 2017-02-28 09:39:56Z

The issue is because you're dynamically amending the elements, so you need to use delegated event handlers to bind their events:

$('.row').on('click', '.addRow', fn);
$('.row').on('click', '.deleteRow', fn);

Try this:

$(".row").on("click", '.addRow', function() {
  var $delete = '<h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4>';
  var $clone = $(this).parent().parent();
  $clone.find(".addRow").remove();
  $clone.find("td:eq(0)").append($delete);
  $(".selected table").append($clone);
  $(".deleteRow").on("click", function() {
    var $add = '<h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4>';
    var newClone = $(this).parent().parent();
    newClone.find(".deleteRow").remove();
    newClone.find("td:eq(0)").append($add);
    $(".available table").append(newClone);
  });
});

$(".row").on("click", '.deleteRow', function() {
  var $add = '<h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4>';
  var newClone = $(this).parent().parent();
  newClone.find(".deleteRow").remove();
  newClone.find("td:eq(0)").append($add);
  $(".available table").append(newClone);
  $(".addRow").on("click", function() {
    var $delete = '<h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4>';
    var $clone = $(this).parent().parent();
    $clone.find(".addRow").remove();
    $clone.find("td:eq(0)").append($delete);
    $(".selected table").append($clone);
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-lg-4 col-md-4 col-lg-offset-2 col-md-offset-2 available">
    <label>Available Members</label>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>
            <h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4>
          </td>
          <td>
            <h6>Cab Swift Two</h6>
          </td>
        </tr>
        <tr>
          <td>
            <h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4>
          </td>
          <td>
            <h6>Dharma</h6>
          </td>
        </tr>
        <tr>
          <td>
            <h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4>
          </td>
          <td>
            <h6>Sahoo</h6>
          </td>
        </tr>
        <tr>
          <td>
            <h4 class="glyphicon glyphicon-plus-sign addRow" style="color:#32c24d;cursor:pointer"></h4>
          </td>
          <td>
            <h6>Majhi</h6>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="col-lg-4 col-md-4 selected">
    <label>Selected Members</label>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>
            <h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4>
          </td>
          <td>
            <h6>Shantanu</h6>
          </td>
        </tr>
        <tr>
          <td>
            <h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4>
          </td>
          <td>
            <h6>Android</h6>
          </td>
        </tr>
        <tr>
          <td>
            <h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4>
          </td>
          <td>
            <h6>ios</h6>
          </td>
        </tr>
        <tr>
          <td>
            <h4 class="glyphicon glyphicon-minus-sign deleteRow" style="color:#f44336;cursor:pointer;"></h4>
          </td>
          <td>
            <h6>Windows</h6>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

ok cool, i'll accept your answer but anil kumar answer first

Collectives™ on Stack Overflow

Add, remove row from table using jquery

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related