dynamic remove row wont work, only removes first row and not others

Question

When i try to remove the first row it works but as i add more rows i cant delete them. For some reason i can only remove the first row.

here is my html

<table class="pretty property_units" style="width:800px;">
<thead>
<tr>
<th>Bedroom</th>
<th>Bathroom</th>
<th>Square Feet</th>
<th>Price</th>
<th>Available</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="rows">
    <td><input type='text' name='bedroom[]' value='0' class='input-small'></td>
    <td><input type='text' name='bath[]' value='0' class='input-small'></td>
    <td><input type='text' name='sqrt[]' value='0' class='input-small'></td>
    <td><input type='text' name='price[]' value='0' class='input-small'></td>
    <td>
        <select name='avail[]' class='input-small'>
        <option value='yes'>Yes</option>
        <option value='no'>No</option>
        </select>
    </td>
    <td><button type="button" class="btn btn-danger btn-small removeRow">remove</button></td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-small btn-primary addrow">add row</button>

here is my js

<script type="text/javascript">
$(document).ready(function() {
    $(".addrow").click(function() {
        var tblrow = $('table.property_units tr.rows:last').clone();
        $("table.property_units tbody").append(tblrow);
    });

    $(".removeRow").click(function() {
        $(this).closest("tr").remove();
        return false;
    });
});
</script>

possible duplicate of [jQuery how to bind onclick event to dynamically added HTML element](http://stackoverflow.com/questions/1525664/jquery-how-to-bind-onclick-event-to-dynamically-added-html-element) — Barmar, Aug 24 '13 at 21:47
i've seen the sample that you listed but it wasnt very clear. My sample is very clear to the reader, very clear and clean code. — Exploit, Aug 25 '13 at 07:35
If that question wasn't clear to you, maybe one of the many questions it's linked to would be. This question is asked on a daily basis on SO, one of them should have an answer that you understand. — Barmar, Aug 25 '13 at 17:32

score 2 · Accepted Answer · edited May 23 '17 at 12:28

2

You have to delegate the event:

$(document).on('click', '.removeRow', function() {
    $(this).closest("tr").remove();
    return false;
});

To improve performance, I would add an id to the table and bind the event to the table instead of document.

For further explanation have a look at this question.

edited May 23 '17 at 12:28

Community

1
1

answered Aug 24 '13 at 21:48

Marcel Gwerder

8,353
5
35
60

thanks for your answer, so with $(document) instead of $('.removeRow') it waits for an event to take place? – Exploit Aug 24 '13 at 21:51
also what is the difference between $().click and $().on('click') – Exploit Aug 24 '13 at 21:51
It basically adds the click event to `document` and checks if the actual clicked element was the one with `.removeRow`. If you bind it directly to `.removeRow`, newly created elements will not have any event handler. `click` is just the short version of `on('click')` but `on` allows you to add a delegate parameter. – Marcel Gwerder Aug 24 '13 at 21:54

score 0 · Answer 2 · answered Aug 24 '13 at 21:47

When you create new element with jQuery you must bind a event. You can use delegate instead click, check here: enter link description here

or you can make function deleteRws(){ your code for delete} and then call it after : $("table.property_units tbody").append(tblrow);

score 0 · Answer 3 · answered Aug 24 '13 at 21:48

That $(".removeRow").click(... only applies to any matching rows that existed at the time it was called. It won't affect new rows (and their contents) created via your .addrow click handler.

You'll need to add that manually:

$(document).ready(function() {
  var remover = function() {
    $(this).closest("tr").remove();
    return false;
  };

  $(".addrow").click(function() {
          var tblrow = $('table.property_units tr.rows:last').clone();
          $('.removeRow', tblrow).click(remover);
          $("table.property_units tbody").append(tblrow);
      });

  $(".removeRow").click(remover);
});

Example: http://codepen.io/paulroub/pen/Bekit

i never knew you can do this, $('.removeRow', tblrow) – Exploit Aug 24 '13 at 21:54 — Exploit, Aug 24 '13 at 21:54

dynamic remove row wont work, only removes first row and not others

3 Answers3