How do I remove the just added tr with append

Question

Finally found a way to a new table-row with jQuery but I don't know how I can remove the same table-row with a button click.

I have tried using this code but nothing happens.

  $(document).ready(function() {
    $("#btnAdd").click(function() {
      $("table").append(
        "<tr id='tr2'><td class='col-md-8'><input type='list' class='form-control'></input></td><td><button type='button' class='btn btn-info btn-rounded btn-sm my-0'>Omhoog</button></td><td><button type='button' class='btn btn-info btn-rounded btn-sm my-0'>Omlaag</button></td><button></button><td><button id='btnRemove2' type='button' class='btn btn-danger btn-rounded btn-sm my-0'>Verwijder</button></td></tr>"
      );
    });
    $("#btnRemove").click(function() {
      $("#tr1").remove();
    });
    $("#btnRemove2").click(function() {
      $("#tr2").remove();
    });
  });

I wish to remove tr2 when clicking the button with id='btnRemove2' but when I click remove button nothing happens.

Don’t append directly to `$("table")`. Append to `$("table tbody")` instead. — Sebastian Simon, Oct 10 '19 at 10:38
`$("#btnRemove")` and `$("#btnRemove2")` don’t exist yet, when you call these event listeners. — Sebastian Simon, Oct 10 '19 at 10:38
how about you used $('table tbody').on('click', '#btnremove', function(){ }) — Martin M, Oct 10 '19 at 10:40

score 1 · Answer 1 · answered Oct 10 '19 at 10:41

There's a few issues to fix here.

Firstly don't use id attributes in content which can be dynamically appended multiple times. You'll end up with duplicate ids which is invalid and will cause issues in your JS. Use common class attributes instead.

Secondly you can attach an event handler to all of the elements with that common class to remove the row. You can use DOM traversal methods to find the single tr related to the clicked button instead of targeting it by id.

Finally you will need to use a delegated event handler as the button is dynamically created, and is not present in the DOM when the page loads. With all that said, try this:

$(document).ready(function() {
  $("#btnAdd").click(function() {
    $("table").append('<tr><td class="col-md-8"><input type="list" class="form-control"></input></td><td><button type="button" class="btn btn-info btn-rounded btn-sm my-0">Omhoog</button></td><td><button type="button" class="btn btn-info btn-rounded btn-sm my-0">Omlaag</button></td><button></button><td><button type="button" class="btn btn-danger btn-rounded btn-sm my-0 delete">Verwijder</button></td></tr>'
    );
  });
  
  $('table').on('click', '.delete', function() {
    $(this).closest('tr').remove();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btnAdd">Add</button>
<table></table>

Note that I added the delete class to the 'Verwijder' button.

Thanks I’ll keep the id and class thing in mind. It’s working now. — Sije De Vos, Oct 11 '19 at 13:18

score 0 · Answer 2 · answered Oct 10 '19 at 10:47

You need event delegation for this. Also it's not ideal to use an id with a fixed number for each of your operations. If your table has 1000 rows, you don't want to copy-paste your function 1000 times.

I created an example based on classes:

$(document).ready(function() {
  $(".btn-add").click(function() {
    $("table#myTable").append(
      "<tr id='tr2'><td class='col-md-8'><input type='list' class='form-control'></input></td><td><button type='button' class='btn btn-info btn-rounded btn-sm my-0'>Omhoog</button></td><td><button type='button' class='btn btn-info btn-rounded btn-sm my-0'>Omlaag</button></td><td><button type='button' class='btn btn-danger btn-rounded btn-sm my-0 btn-remove'>Verwijder</button></td></tr>"
    );
  });
  $("#myTable").on('click', '.btn-remove', function() {
    $(this).closest('tr').remove();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn-add">Add a row </button>

<table id="myTable">
  <tr>
    <td class='col-md-8'><input type='list' class='form-control'></td>
    <td><button type='button' class='btn btn-info btn-rounded btn-sm my-0'>Omhoog</button></td>
    <td><button type='button' class='btn btn-info btn-rounded btn-sm my-0'>Omlaag</button></td>
    <td><button type='button' class='btn btn-danger btn-rounded btn-sm my-0 btn-remove'>Verwijder</button></td>
  </tr>
</table>

I don't have the id myTable, so nothing happens here
<table> 
  
  <tr>
    <td class='col-md-8'><input type='list' class='form-control'></td>
    <td><button type='button' class='btn btn-info btn-rounded btn-sm my-0'>Omhoog</button></td>
    <td><button type='button' class='btn btn-info btn-rounded btn-sm my-0'>Omlaag</button></td>
    <td><button type='button' class='btn btn-danger btn-rounded btn-sm my-0 btn-remove'>Verwijder</button></td>
  </tr>
</table>

score 0 · Accepted Answer · answered Oct 10 '19 at 11:42

I have written code which will add tr at last (by clicking add button) and remove last added raw(by clicking remove button).

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    var rowCount = $('#myTable tr').length;
    $("table#myTable").append(
    "<tr id='#tr"+(rowCount+1)+"'><td class='col-md-8'><input type='list' class='form-control'></input></td>/tr>"
    );


    $("#btnAdd").click(function() {
    rowCount++;
    $("table#myTable").append(
    "<tr id='#tr"+(rowCount+1)+"'><td class='col-md-8'><input type='list' class='form-control'></input></td>/tr>");
    });
    $("#btnRemove").click(function() {
        $('#myTable tr:last').remove();
    });
});
</script>

<body>
<button id="btnAdd">Add</button>
<button id="btnRemove">Remove</button>
<table id="myTable"></table>
</body>

Thanks it’s working now – Sije De Vos Oct 11 '19 at 13:17 — Sije De Vos, Oct 11 '19 at 13:17

How do I remove the just added tr with append

3 Answers3