Невозможно удалить текущую строку jQuery DataTable с помощью локальной кнопки

Question

У меня есть JQuery Datatable, и я динамически добавляю строки. В каждой строке есть ячейка, в которой есть кнопка удаления. Моя проблема в том, что я не могу удалить строки кнопками, и мне даже не удается нацелиться на текущую строку.

Вот мой код DataTable:

var tab_presta = $("#tableau_presta").DataTable({
    "searching": false,
    "paging":   false,
    "ordering": false,
    "info":     false,
    responsive: true,
    "language": {
        "emptyTable": "No product added to the contract for the moment."
      }
});

Вот как я создаю кнопки в каждой строке (для события отправки):

form2.on('submit', function (event) {

tab_presta.row.add( 
    [            
        '<center><button type="button" id="btn_supp' + (++idCount) + '" onclick="alert(this.parentNode)" class="btn btn-xs btn-block btn-danger confirmation">Delete</button></center>'
    ] 
)
.draw( false );

// here I dynamically add an id to each button based on a variable
$('.btn btn-xs btn-block btn-danger confirmation').each(function() {
        $(this).attr('id', 'suppr' + idCount);
        idCount++;
    });
});

А вот мой код для удаления при нажатии на каждую кнопку:

for (j = 0; j <= btn_count; j++) {
    $("#tableau_presta").on("click", btn_supp[j], function(){
        //tab_presta.row($(this).parents('tr')).remove().draw(false);
        var row = $(this).closest("tr");
        console.log(row);
    });
}

Как видите, я прокомментировал часть remove (), потому что она не работает, поэтому я попытался найти ближайший tr из $(this) (button), но в результате я не получил строку в консоли , Она пуста, и я не понимаю почему, потому что кнопка действительно существует, и я могу получить ее идентификатор, когда нажимаю на нее, если я поставлю onclick"alert(this.id).

Есть идеи?

Answer 1

Вам не нужно связывать событие click внутри цикла. Вместо этого используйте селектор атрибутов class или . В этом случае выбор всех элементов с id, который ^ начинается с btn_supp = [id^=btn_supp].

$("#tableau_presta").on("click", "[id^=btn_supp]", function() {
  $(this).closest("tr").remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableau_presta">
  <tr>
    <td>
      <button type="button" id="btn_supp1" class="btn btn-xs btn-block btn-danger confirmation">Delete</button>
    </td>
  </tr>
  <tr>
    <td>
      <button type="button" id="btn_supp2" class="btn btn-xs btn-block btn-danger confirmation">Delete</button>
    </td>
  </tr>
</table>