Удалить строку таблицы с идентификатором Dynami c, полученным из БД, используя ajax

Question

У меня есть таблица, содержание которой исходит из базы данных. Когда я нажимаю на кнопку удаления, я хочу удалить эту строку с помощью Ajax. На самом деле сейчас это работает, но с ошибкой, и все строки удаляются, когда я нажимаю на кнопку, а затем, если я переосмысливаю sh, строка, которую я удалил, исчезает, и отображаются другие строки. Но как я сказал, что нужно refre sh. Любое решение будет оценено.

$('.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>
      <td>
        <form action="" method="post" class="dashboard-subscribe-form">
          <input id="<?php echo $result['id']; ?>" type="hidden" class="dash-subscribe-form-btn" name="hidden-del" value='<?php echo $result[' id ']; ?>'/>
          <button type="submit" name="sub-del-btn" class="btn btn-danger del" value='<?php echo $result[' id ']; ?>'> Delete
           </button>
        </form>
      </td>
    </tr>
    <?php
     $count++;
       }
     ?>
</tbody>

удалить-подписаться. php:

<?php
require_once('config.php');

$delete_row = $_POST['deleteId'];


if($delete_row){
    $sqlCommand = "DELETE FROM `kq0b3_subscribe` WHERE `id` = ?";
    $sqlCommandPrepare = $pdoObject->prepare($sqlCommand);
    $result = $sqlCommandPrepare->execute([

        $delete_row

    ]);

    /*The json_encode() must be after all of our calculation codes and DB query codes and...(It must be the
       last line of code) */
    echo json_encode(['code' => '200'], JSON_THROW_ON_ERROR, 512);
}
else {
    echo json_encode(['code' => '404'], JSON_THROW_ON_ERROR, 512);
}

---

ОБНОВЛЕНИЕ2: сейчас я использую:

 $('#row-' + deleteId).css('background', 'tomato');
                    $('#row-' + deleteId).fadeOut(1200, () => {

                    });

но новая проблема: не имеет значения, какую кнопку я нажимаю, первая строка удаляется (при нажатии любой кнопки в консоли выводится идентификатор первой кнопки строки, а не фактический идентификатор, на который я нажал.). Как я могу это исправить?

Answer 1

Я думаю, что основной проблемой в этом случае является использование CSS классов в качестве селектора, и кажется, что он выбирает первый экземпляр независимо от того, какой элемент вы нажимаете.

Код, вызывающий это :

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

Вы хотите получать целевой ввод от объекта event, переданного от вашего .submit().

Я создал jsfiddle с пример, который может быть адаптирован к вашему коду, но вот быстрый предварительный просмотр jQuery part.

$('.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"])
})

Он выбирает первый элемент в массиве elements, который является входом. Если вы хотите кнопку, вы можете использовать event.target.elements[1]

Затем вы можете также использовать возвращаемое значение, чтобы удалить <tr> с тем же идентификатором вместо поиска ближайшего. Это можно сделать в success части вашего ajax звонка, не делая refre sh.