使用 ajax 删除来自数据库的具有动态 ID 的表行

Question

我有一个表，它的内容来自数据库。当我单击删除按钮时，我想使用Ajax删除该行。实际上，现在它正在工作，但是有一个错误，那就是当我单击按钮时，所有行都会被删除，然后如果我刷新，则删除的行将消失，并显示其他行。但正如我所说，它需要刷新。任何解决方案将不胜感激。$('.dashboard-subscribe-form').submit(() => {  event.preventDefault();  const currentHiddBtn = $('.dash-subscribe-form-btn');  console.log(currentHiddBtn.closest('tr'));  const userCaution = confirm('Want to delete this quote?');  if (userCaution) { //If admin insists to delete the row    const deleteId = $('.dash-subscribe-form-btn').attr('value');    $.ajax({      type: "POST",      url: "delete-subscribe.php",      dataType: "json",      data: {        deleteId: deleteId      },       success: (data) => {        if (data.code === '200') {          console.log('It works!');          currentHiddBtn.closest('tr').css('background', 'tomato');          currentHiddBtn.closest('tr').fadeOut(1200, () => {          });        } else if (data.code === '404') {          alert('An error occurred!Please try again.');        }      }    });  }});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><tbody>  <?php       $count = 1;       $sqlCommand = "SELECT * FROM `kq0b3_subscribe`";       $sqlCommandPrepare = $pdoObject->prepare($sqlCommand);       $sqlCommandPrepare->execute();       while ($result = $sqlCommandPrepare->fetch()) {   ?>   <tr id="row-<?php echo $result['id']; ?>">      <td class="dashboard-records">        <?php echo $count; ?>      </td>      <td class="dashboard-records">        <?php echo $result['email']; ?>      </td>但新的问题是：我点击哪个按钮并不重要，第一行被删除（当任何按钮被点击时，在控制台中，第一行按钮的id被打印出来，而不是我被点击的实际id。我该如何解决这个问题？

Answer 1

我认为在这种情况下，主要问题是使用CSS类作为选择器，并且无论您单击哪个项目，它似乎都在选择第一个实例。

导致此问题的代码是：

const deleteId = $('.dash-subscribe-form-btn').attr('value');

您希望从 从 传递的对象获取目标输入。event.submit()

我已经创建了一个jsfiddle，其中包含一个可以适应您的代码的示例，但这里是jQuery部分的快速预览。

$('.dashboard-subscribe-form').submit((event) => {
  event.preventDefault()  console.log(event.target.elements[0]["value"])
  $('#result-from-click').html("Input Value: " + event.target.elements[0]["value"])
})

它正在选择元素数组中的第一个元素，即输入。如果你想要这个按钮，你可以使用event.target.elements[1]

然后，您还可以使用返回的值删除具有相同 id 的 ，而不是查找最近的。这可以在呼叫部分完成，而无需刷新。<tr>successajax