Michael Michael - 1 month ago 7
jQuery Question

Delete table row with index jQuery

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:

<table id="splashTable" class="table table-fixed">
<thead>
<tr>
<th class="col-xs-3">First</th>
<th class="col-xs-3">Last</th>
<th class="col-xs-6">Age</th>
<th class="col-xs-6">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Freeman</td>
<td class="col-xs-6">36</td>
<td class="col-xs-6">$53,000</td>
</tr>

Answer Source

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;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<button id="deleteBtn">Delete selected row</button>
<table id="splashTable" class="table table-fixed">
    <thead>
    <tr>
        <th class="col-xs-3">First</th>
        <th class="col-xs-3">Last</th>
        <th class="col-xs-6">Age</th>
        <th class="col-xs-6">Salary</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="col-xs-3">John1</td>
        <td class="col-xs-3">Freeman</td>
        <td class="col-xs-6">36</td>
        <td class="col-xs-6">$53,000</td>
    </tr>
    <tr>
        <td class="col-xs-3">John2</td>
        <td class="col-xs-3">Freeman</td>
        <td class="col-xs-6">36</td>
        <td class="col-xs-6">$53,000</td>
    </tr>
    </tbody>
</table>

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;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<table id="splashTable" class="table table-fixed">
    <thead>
    <tr>
        <th class="col-xs-3">First</th>
        <th class="col-xs-3">Last</th>
        <th class="col-xs-6">Age</th>
        <th class="col-xs-6">Salary</th>
        <th class="col-xs-6">Delete</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="col-xs-3">John1</td>
        <td class="col-xs-3">Freeman</td>
        <td class="col-xs-6">36</td>
        <td class="col-xs-6">$53,000</td>
        <td><button type="button" class="btn btn-default btn-sm delete"><span class="glyphicon glyphicon-trash"></span></button></td>
    </tr>
    <tr>
        <td class="col-xs-3">John2</td>
        <td class="col-xs-3">Freeman</td>
        <td class="col-xs-6">36</td>
        <td class="col-xs-6">$53,000</td>
        <td><button type="button" class="btn btn-default btn-sm delete"><span class="glyphicon glyphicon-trash"></span></button></td>
    </tr>
    </tbody>
</table>