CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Atal Shrivastava
Atal Shrivastava

Reputation: 692

Add, remove row from table using jquery

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

Upvotes: 0

Views: 1071

Answers (2)

Anil
Anil

Reputation: 3752

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

Upvotes: 6

Rory McCrossan
Rory McCrossan

Reputation: 337560

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>

Upvotes: 1

Related Questions