Cómo eliminar una fila específica de una tabla dinámica después de preguntar al usuario utilizando jQuery?

Vassilis:

A continuación se muestra el código que estoy usando para agregar valores de entrada específicos que un usuario entra en un modal, a una tabla utilizando JQuery, en cada hilera, un botón de borrar $('td:contains("delete")').html("<i class='far fa-trash-alt' id='btnDelete'></i>").addClass("text-center delete delete:hover")también se genera, sin embargo yo estoy luchando con eliminar realmente la fila deseada en la tabla .

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');
          });
      });
    }
  });

El código HTML para la tabla y modal de eliminación es:

<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>

Cuando se hace clic en el botón de eliminación de una fila específica de un modal #delete-modalse visualiza la que pide al usuario que confirme si desea eliminar la fila deseada, sólo si el sí usuario hace clic en el modal #btnDeleteConfirmationse deben suprimir la fila. Mi intento de esta se encuentra por debajo, pero en realidad no lo borrado y no estoy seguro de lo que estoy haciendo mal.

$('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');
          });
      });

Cualquier ayuda sería muy apreciada.

Sr. Khan:

Usted está tomando el este mal de referencia. btnDeleteConfirmation doesnot tiene un tr padres por lo tanto, no su trabajo. Lo que necesita es para almacenar la referencia this de esta línea.

$('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;

Luego, cuando se le pasa con los padres ( 'tr'). Remove (), deberá trabajar!