无法使用本地按钮删除 jQuery DataTable 的当前行

Question

我有一个 jQuery 数据表，我动态添加行。每行都有一个单元格，其中有一个删除按钮。我的问题是我无法使用按钮删除行，甚至无法定位当前行。

这是我的数据表代码：

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)，我可以在单击它时获取它的 id。

有什么想法吗？

Answer 1

您不需要在循环内绑定点击事件。相反，请使用class 或attribute selector。在这种情况下，选择所有具有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>