Как удалить указанную c строку динамической c таблицы после запроса пользователя с помощью JQuery?

Question

Ниже приведен код, который я использую для добавления указанных c входных значений, которые пользователь вводит в модальном режиме, в таблицу с использованием JQuery, в каждой строке также создается кнопка удаления $('td:contains("delete")').html("<i class='far fa-trash-alt' id='btnDelete'></i>").addClass("text-center delete delete:hover"), однако я я борюсь с фактическим удалением нужной строки в таблице.

if ($("#insert-image").val() !== '' && $("#insert-name").val() !== '' && $("#insert-surname").val() !== '') {
      var imagePrep = $("#insert-image").val().replace(/C:\\fakepath\\/i, 'images/');
      let row = '<tr> <td class="align-middle">' + "image" + '</td> <td class="align-middle">' + $("#insert-name").val() + '</td> <td class="align-middle">' + $("#insert-surname").val() + '</td> <td class="align-middle">' + "edit" + '</td> <td class="align-middle">' + "delete" + '</td> </tr>'
      $('tbody').append(row);

      $('td:contains("image")').html("<img src=" + imagePrep + " alt='selected-image' class='image' data-toggle='popover-hover'>");

      $('td:contains("edit")').html("<i class='fas fa-edit'></i>").addClass("text-center edit edit:hover").on('click', function() {});

      $('td:contains("delete")').html("<i class='far fa-trash-alt' id='btnDelete'></i>").addClass("text-center delete delete:hover").on('click', function() {
        $("#delete-modal").modal('show');
        $("#btnDeleteConfirmation").on('click', function() {
            $(this).parents('tr').remove();
            $("#delete-modal").modal('hide');
          });
      });
    }
  });

Код HTML для таблицы и модальное удаление:

<table class="table table-bordered">
        <thead class="thead-dark">
          <tr>
            <th scope="col">Image</th>
            <th scope="col">Name</th>
            <th scope="col">Surname</th>
            <th scope="col">Edit</th>
            <th scope="col">Delete</th>
          </tr>
        </thead>
        <tbody id="tbody">

        </tbody>
</table>

<div class="modal fade" id="delete-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalCenterTitle">Delete Confirmation</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          Are you sure you want to delete this item?
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal" id="btnDeleteDismiss">No</button>
          <button type="button" class="btn btn-primary" id="btnDeleteConfirmation">Yes</button>
        </div>
      </div>
    </div>
  </div>

Когда кнопка удаления определенного c строка щелкается, отображается модальное значение #delete-modal, которое предлагает пользователю подтвердить, хотят ли они удалить нужную строку, только если пользователь нажимает да на модальном #btnDeleteConfirmation, если строка будет удалена. Моя попытка сделать это ниже, но на самом деле она ничего не удаляет, и я не уверен, что делаю неправильно.

$('td:contains("delete")').html("<i class='far fa-trash-alt' id='btnDelete'></i>").addClass("text-center delete delete:hover").on('click', function() {
        $("#delete-modal").modal('show');
        $("#btnDeleteConfirmation").on('click', function() {
            $(this).parents('tr').remove();
            $("#delete-modal").modal('hide');
          });
      });

Любая помощь будет принята с благодарностью.

Answer 1

Вы ошибочно принимаете эту ссылку. btnDeleteConfirmation не имеет родительского tr, следовательно, он не работает. Вам нужно сохранить ссылку this этой строки.

$('td:contains("delete")').html("<i class='far fa-trash-alt' id='btnDelete'></i>").addClass("text-center delete delete:hover").on('click', function() {
let deleteRef = this;

Затем, когда вы передадите ее с parent ('tr'). Remove (), она будет работать!