How to delete a specific row of a dynamic table using JQuery

Vassilis :

The code below adds input values that a user inputs, to a table in my HTML page, along with an edit and delete button in each row:

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

If the user clicks on a specific delete button of a row i need that row to confirm deletion and then if they confirm the deletion then that specific row must be deleted but I'm not sure how to go about deleting the specific row since the table is dynamic , here is what I've got so far:

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

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

any help would be much appreciated.

HTML table code:

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

manikant gautam :

You can use $(this).closest('tr').remove() here is example

$(".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>