Delete table row with index jQuery

Question

I currently select a row, and I want to click a delete button, that will delete the selected row (i have the row selection already, just need the delete part).

I have tried:

$("#deleteBtn").click(function() {
    $(this).closest('tr').remove();
});

Html:

gaetanoM · Accepted Answer

Because I don't see all your html I assume a solution.

In order to select a row you can add a class selected to the row and you can remove such a class from the previous selected one. Hence, only one row per time is selected.

On delete you can simply remove the row with the selected class.

$('#splashTable tbody tr').on('click', function(e) {
    $(this).siblings('.selected').removeClass('selected');
    $(this).addClass('selected');
})


$("#deleteBtn").click(function() {
    $('#splashTable tbody tr.selected').remove();
});

.selected {
    background-color: yellow;
}








    
    
        First
        Last
        Age
        Salary
    
    
    
    
        John1
        Freeman
        36
        $53,000
    
    
        John2
        Freeman
        36
        $53,000

If, instead, the delete button is added to each row the solution can be:

$("#splashTable .delete").on('click', function (e) {
    var row = $(this).closest('tr');
    if (row.is('.selected'))
        row.remove();
});

$('#splashTable tbody tr').on('click', function (e) {
    $(this).siblings('.selected').removeClass('selected');
    $(this).addClass('selected');
})


$("#splashTable .delete").on('click', function (e) {
    var row = $(this).closest('tr');
    if (row.is('.selected'))
        row.remove();
});

.selected {
    background-color: yellow;
}







    
    
        First
        Last
        Age
        Salary
        Delete
    
    
    
    
        John1
        Freeman
        36
        $53,000
        
    
    
        John2
        Freeman
        36
        $53,000

Delete table row with index jQuery

Answers (1)

Related Questions