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

Question

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>

Answer 1

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>

Answer 2

You want to add the onClick -handler of the delete-button right in place where you create it. This way you can use the 'this-context' which makes it easier to handle relative parents or descendants. Here is a simplified example of your code to demonstrate that:

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