removing row inside table with jquery

I have a table where I’m dynamically appending and removing rows. When pressing ‘remove’ I want to remove the whole row. This works cleanly with the already existing rows, but when using the same function for the new rows it removes everything.

How can I remove just the newly created rows, not all rows?

I have tried using find() to find the tr but it doesn’t work.

$("#addRow").click(function() {
  $("#table").append(
    `<tr>`,
    `<td></td>`,
    `<td></td>`,
    `<td></td>`,
    `<td></td>`,
    `<td></td>`,
    `<td class="remove"><button>Remove</button></td>`,
    `</tr>`
  );

  $('.remove button').on('click', function() {
    removeRow($(this))
  });
})

$('.remove button').on('click', function() {
  removeRow($(this))
});

function removeRow(row) {
  row.parent().parent().remove();
}

#table {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

#table td {
  width: 20%;
  border: solid 1px black;
}

#table .remove {
  border: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="remove"><button>Remove</button></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="remove"><button>Remove</button></td>
  </tr>
</table>
<p><button id="addRow">Add a new row</button></p>

Answer

The problem is because you’re appending the new HTML content as individual elements, so it is not being generated correctly. If you use the DOM inspector after you call append() you will see the issue.

To fix this, concatenate the HTML strings together and append() them in a single operation:

$("#table").append(
  `<tr>` + 
  `<td></td>` +
  `<td></td>` +
  `<td></td>` +
  `<td></td>` +
  `<td></td>` +
  `<td class="remove"><button>Remove</button></td>` +
  `</tr>`
);

That being said, the code you’re using is not ideal and should be improved.

Firstly, use a <template /> element to store the HTML to be dynamically created within your actual HTML page. Avoid putting HTML within JS as much as possible. It’s bad practice to do so due to it being a violation of the Separation of Concerns principle.

From there, use jQuery’s closest() method to find the parent tr element to be removed instead of chaining multiple parent() calls.

Finally, use a single delegated event handler on the .remove button so that you don’t need to re-bind it every time a new row is created.

With those corrections applied, your code should look like this:

let rowTemplate = $('#row-template').html();

$("#addRow").click(function() {
  $("#table").append(rowTemplate);
})

$(document).on('click', '.remove button', e => {
  $(e.target).closest('tr').remove();
});

#table {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

#table td {
  width: 20%;
  border: solid 1px black;
}

#table .remove {
  border: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="remove"><button>Remove</button></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="remove"><button>Remove</button></td>
  </tr>
</table>
<p><button id="addRow">Add a new row</button></p>

<template id="row-template">
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="remove"><button>Remove</button></td>
  </tr>
</template>

Advertisement

Answer