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

Question

Приведенный ниже код добавляет вводимые пользователем значения в таблицу на моей странице HTML вместе с кнопкой редактирования и удаления в каждой строке:

$("#btnAdd").on('click', function() {
    if($("#insert-image").val() !== '' && $("#insert-name").val() !== '' && $("#insert-surname").val() !== ''){
        var imagePrep = $("#insert-image").val().replace(/C:\\fakepath\\/i, '');
        let row = '<tr> <td>' + "image" + '</td> <td>' + $("#insert-name").val() + '</td> <td>' + $("#insert-surname").val() + '</td> <td>' + "edit" + '</td> <td>' + "delete" + '</td> </tr>'
        $('tbody').append(row);
        $('td:contains("edit")').html("<i class='fas fa-edit'></i>").addClass("text-center edit edit:hover");
        $('td:contains("delete")').html("<i class='far fa-trash-alt'></i>").addClass("text-center delete delete:hover").attr("id", "btnDelete");
        $('td:contains("image")').html(image).addClass("text-center");
    }
});

Если пользователь нажимает на кнопку определенная c кнопка удаления строки мне нужна эта строка, чтобы подтвердить удаление, а затем, если они подтверждают удаление, тогда указанная строка c должна быть удалена, но я не уверен, как go об удалении указанного c строка, так как таблица динамическая c, вот что я получил:

$("#tbody").on('click','#btnDelete', function() {
  $("#delete-modal").modal('show');
});

$("#btnDeleteConfirmation").on('click', function() {
  $("btnDelete").parents("tr").remove();
});

любая помощь будет высоко ценится.

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>

Answer 1

Вы можете использовать $(this).closest('tr').remove(), вот пример

$(".delete").on("click",function(){
   $(this).closest('tr').remove();
})

.pointer{
 cursor:pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<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>
          <tr>
            <td scope="col">1</td>
            <td scope="col">1</td>
            <td scope="col">1</td>
            <td scope="col">Edit</td>
            <td class="delete pointer" scope="col">Delete</td>
          </tr>
           <tr>
            <td scope="col">2</td>
            <td scope="col">2</td>
            <td scope="col">2</td>
            <td scope="col">Edit</td>
            <td class="delete pointer" scope="col">Delete</td>
          </tr>
        </thead>
        <tbody id="tbody">

        </tbody>
      </table>

Answer 2

Вы хотите добавить обработчик onClick кнопки удаления прямо там, где вы его создали. Таким образом, вы можете использовать «этот контекст», который облегчает работу с родителями или потомками. Вот упрощенный пример вашего кода, демонстрирующий, что:

$("#btnAdd").on('click', function() {
    if(
        $("#insert-image").val() !== '' && 
        $("#insert-name").val() !== '' && 
        $("#insert-surname").val() !== ''
    ){
        let row = '<tr><td>image</td><td>name</td><td>surname</td><td>edit</td><td>delete</td></tr>'
        $('tbody').append(row);
        $('td:contains("edit")').html('<button>edit</button')
        $('td:contains("delete")').html('<button>delete</button>')
          //Add your eventhandler here so u can use the parent of "this" button $(this).parent
          .on('click', function() {
              $(this).parents('tr').remove();
          });
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

<button id="btnAdd">Add</button>