javascript - 根据 ajax 调用在本地删除表行

Question

我有一个表，它通过重新加载页面来更新，我试图在本地处理该页面。所以我通过 PHP 渲染下面这个表，然后通过 ajax 更新它。当我现在想要删除行时，我想在从 ajax 获得成功响应时删除行，但我用于删除的代码是全局的，无论如何都会删除。有什么方法可以将我的 js 代码封装在 js 函数中，并可能通过 onclick 事件调用它吗？

我的 table :

<table>
 <tr>
   <td>1</td>
   <td><a class="remove" href='#' onClick="Remove()">Remove</a></td>
 </tr>
  <tr>
   <td>2</td>
   <td><a class="remove" href='#'>Remove</a></td>
  </tr>
   <tr>
    <td>3</td>
    <td><a class="remove" href='#'>Remove</a></td>
  </tr>
</table>

我的JS要删除

$(document).on("click", "a.remove", function() {
    $(this).closest("tr").remove();
});

这就是我想在本地删除表格行的地方:

function Remove(id) {
$.ajax({
    url: "ajax/ajax.php",
    type: "POST",
    data: {
operation: "remove",
id: id
},
    success: function(response){
        // This is where I want the deletion to be
    },
    error: function (response) {
        console.log("Something went wrong");
    },
});
}

有人知道如何重做要删除的js以在Remove()中工作吗？

Answer 1

将您的表格更改为

<table>
 <tr>
   <td>1</td>
   <td><a class="remove" data-rowid="1">Remove</a></td>
 </tr>
 <tr>
   <td>2</td>
   <td><a class="remove" data-rowid="2">Remove</a></td>
 </tr>
 <tr>
   <td>3</td>
   <td><a class="remove" data-rowid="3">Remove</a></td>
 </tr>
</table>

data-rowid 的值应该是您要删除的动态项目 ID!

你的 JS 代码可能是:

$(document).on("click", "a.remove", function(event) {
    event.preventDefault();
    var id = $(this).data("rowid");
    var row = $(this).closest("tr");    
    $.ajax({
       url: "ajax/ajax.php",
       type: "POST",
       data: {
          operation: "remove",
          id: id
       },
       success: function(response){
          row.remove();
       },
       error: function (response) {
          console.log("Something went wrong");
       }
    });

});