jQuery - How to remove row from dynamically created table?

Question

I am starting my studies in jQuery and I have the following question:

I have a table created in HTML. This table contains only one row with th's. Records are entered by jQuery. Through user interaction, data is obtained and saved in variables, then added to the table with append:

$("table").append("<tr><td>" + nome + "</td><td>" + quantidade +
"</td><td>" + valor + "</td><td>" + dataFormatada + "</td><td>" +
acoes + "</td></tr>");

So far, everything works correctly and I can enter all the records.

The variable actions was defined as follows::

var acoes = "<a href='#' class='exclui'>Excluir</a> <a href='#' class='cor'>Mudar Cor</a>";

That is, I would like to be allowed to delete and change the color of each record. For the first part, I have tried hide, remove and the code below, but nothing worked:

$(".exclui").click(function() {
    //$(this).parent().remove();
});

I imagine it’s simple, but I couldn’t. Can anyone help me? Thank you.

Answer 1

It is necessary to use Eventdelegation, that is, the Handler of the event is in some parent element of the elements that will be inserted in the future. That way when the element is inserted and an event occurs in it, this element propagates to the parents until it reaches Handler.

jQuery already does it with the method jQuery.on().

Example:

$("#tabela").on('click', '.exclui', function() {
  $(this).closest('tr').remove();
});


// Apenas insere <tr> dinamicamente para demonstração
var $tbody = $('#tabela').find('tbody');
$('#add-tr').on('click', function() {
    $tbody.append(`
      <tr>
        <td>Valor 1</td>
        <td>Valor 2</td>
        <td><button class="exclui">X</button></td>
      </tr>
    `);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="add-tr">Adiciona linha</button>

<table id="tabela">
  <thead>
    <tr>
      <th>Campo 1</th>
      <th>Campo 2</th>
      <th>Campo 3</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>