使用 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&nbsp;deleteId&nbsp;=&nbsp;$('.dash-subscribe-form-btn').attr('value');您希望从 从 传递的对象获取目标输入。event.submit()我已经创建了一个jsfiddle，其中包含一个可以适应您的代码的示例，但这里是jQuery部分的快速预览。$('.dashboard-subscribe-form').submit((event)&nbsp;=>&nbsp;{ &nbsp;&nbsp;event.preventDefault()&nbsp;&nbsp;console.log(event.target.elements[0]["value"]) &nbsp;&nbsp;$('#result-from-click').html("Input&nbsp;Value:&nbsp;"&nbsp;+&nbsp;event.target.elements[0]["value"]) })它正在选择元素数组中的第一个元素，即输入。如果你想要这个按钮，你可以使用event.target.elements[1]然后，您还可以使用返回的值删除具有相同 id 的 ，而不是查找最近的。这可以在呼叫部分完成，而无需刷新。<tr>successajax