按钮带data-id属性时Datatables行删除失败，$(this).closest('tr').remove()无效

你遇到的删除行失效问题核心是this指向变化：在$.ajax的success回调函数中，默认this指向的是当前Ajax请求的配置对象，不再指向你点击的删除按钮元素，因此$(this).closest("tr")无法匹配到对应的表格行，删除操作自然不生效。

以下三种常用方案任选一种即可：

• 方案1：提前缓存目标行/按钮元素
  在发起Ajax请求前，先把当前点击按钮对应的表格行存为临时变量，回调函数中直接调用缓存对象执行删除即可，兼容性最好。
  修改后的代码示例：

$('#table_mediaBank').on('click', '.remove', function () {
  var id = $(this).data('id'); 
  var media = $(this).closest('tr').find('td:eq(1)').text();
  // 提前缓存要删除的行对象
  var $deleteRow = $(this).closest('tr');

  if(confirm("你确定要删除媒体 '" + media + "' 吗？")) {
      $.ajax({
        url: 'pages/delete.php',
        type: 'POST',
        data: {id: id},
        error: function() {
          alert('删除媒体ID ' + id + ' 时发生错误');
        },
        success: function(data) {
          // 直接操作缓存的行对象删除
          $deleteRow.remove();
        }
    });
  }
});

• 方案2：使用箭头函数作为success回调
  ES6箭头函数不会绑定独立的this，会继承外层作用域的this，也就是点击事件中对应的删除按钮元素。
  修改示例仅需改动success的定义：

success: (data) => {
  $(this).closest("tr").remove();
}

• 方案3：配置Ajax的context参数
  在$.ajax的配置项中添加context: this，指定所有回调函数的this指向外层的按钮元素，原有success代码无需改动。
  修改示例：

$.ajax({
  url: 'pages/delete.php',
  type: 'POST',
  data: {id: id},
  // 指定回调的this指向外层按钮
  context: this,
  error: function() {
    alert('删除媒体ID ' + id + ' 时发生错误');
  },
  success: function(data) {
    // 原有代码可直接生效
    $(this).closest("tr").remove();
  }
});

内容的提问来源于stack exchange，提问作者Nico van Wijk