I am trying to have my script delete the row completely once the \"locatebutton\" has been pressed. I have the following code however I cannot seem to get it working right.
I know this is an old post, but for further references, the proposed answers won't work for responsive tables which rows have been splitted. In that case, we will need something like :
$('#example').on("click", "button", function(){
var td = $(this).closest("tr");
if (td.hasClass("child")) {td.prev('.parent').remove();}
td.remove();
});
Edit
Better yet (I think) :
$('#example').on("click", "button", function(){
var table = $(button).closest("table").DataTable();
table.cell( {focused:true} ).row().remove();
table.draw();
I was able to accomplish this with the following
$("#dataTables-example").on('click', '.btn-info', function () {
$(this).parent().parent().remove();
});
Try this one. this is working example
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Position</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td><button>Delete</button></td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function () {
var table = $('#example').DataTable({
"columns": [
null,
null,
null,
{
"sortable": false
}
]
});
});
$('#example').on("click", "button", function(){
console.log($(this).parent());
table.row($(this).parents('tr')).remove().draw(false);
});
</script>