How to get a hidden Id to delete a record in a jQuery Datatable

Question

I have Edit and Delete buttons in my jQuery DataTable. The first column is a record ID column and is hidden. I have event handlers for the Edit and Delete buttons. Should I rath

Answer 1

I would suggest the following approach.

Essential part here is to use rows().remove() method (you don't need to have id's of the records you would like to delete).

However, if you wish to delete those records from your backend storage as well, you might do something like:

$('#delete').on('click', function() {
    const selectedRows = dataTable.rows('tr.selected');
    $.ajax(/* throw selected rows data (or particular properties) using selectedRows.data() */);
    selectedRows.remove().draw();
});

//source data
const srcData = [
  {id: 1, name: 'Steve Rogers', title: 'Captain America'},
  {id: 2, name: 'Anthony Stark', title: 'Iron Man'},
  {id: 3, name: 'Peter Parker', title: 'Spider Man'},
  {id: 4, name: 'Bruce Banner', title: 'Halk'},
  {id: 5, name: 'Thor Odinsson', title: 'Thor'}
];
//data table initialization
const dataTable = $('#mytable').DataTable({
  data: srcData,
  dom: 't',
  columns: [
    {data: 'id', visible: false},
    {data: 'name', title: 'Name'},
	//append 'Edit'/'Delete' buttons to the rightmost edge of the cell
    {data: 'title', title: 'Title', render: cellData => cellData+'DeleteEdit'}
  ]
});
//delete button handler
$('#mytable').on('click', '.delete', function () {
	//grab parent  node of the button, use it as 
	//a selector to throw its id into message and 
	//delete corresponding dataTable row
	const currentRow = dataTable.row($(this).closest('tr'));
	$('#msg').text(`Row id ${currentRow.data().id} (${currentRow.data().title}) was removed`);
	currentRow.remove().draw();
});
//edit button handler
$('#mytable').on('click', '.edit', function(){
	$(this).closest('tr').toggleClass('editing');
	if($(this).closest('tr').hasClass('editing')) {
		//turn each table cell into input field
		[...$(this).closest('tr').find('td')].forEach(function(td, colindex){
			$(td).html(` ${colindex==this.length-1?'DeleteEdit':''}`)
		}, $(this).closest('tr').find('td'));
	}
	else {
		//grab input fields from within each cell and 
		//put their values into corresponding dataTable cell
		[...$(this).closest('tr').find('td')].forEach(function(td, colindex){
			const cellValue = $(td).find('input').val();
			dataTable.cell(td).data(cellValue);
			$(td).html(`${cellValue}${colindex==this.length-1?'DeleteEdit':''}`);
		}, $(this).closest('tr').find('td'));
		dataTable.draw();
	}
});

td button {
 display: block;
 float: right;
}