DataTable JQuery How to remove a row from a table based on an ID?

Question

I have a web application where you can drag and drop pictures into boxes. If you drop it in the one it will add the picture's information to the datatable, if you drop in the left it will remove the data from the datatable. I was wondering If there was a way I could remove the row based on the id?

$('#pictures')
    .dataTable({
        "columnDefs": [{
                "orderable": false,
                "targets": 1
            },
            {
                "orderable": false,
                "targets": 3
            }
        ]
    });
var t = $('#pictures')
    .DataTable();


$("#left")
    .droppable({
        accept: ".draggable",
        drop: function (event, ui) {
            console.log("drop");
            $(this)
                .removeClass("border")
                .removeClass("over");
            var dropped = ui.draggable;
            var droppedOn = $(this);
            $(dropped)
                .detach()
                .css({
                    top: 0,
                    left: 0
                })
                .appendTo(droppedOn);

            var $id = $(this)
                .children()
                .last()
                .attr('id');
            var rowId = pictures[id].id;
            t.row(pictures[$id].id)
                .remove()
                .draw(false);
        }
    });

This obviously isn't the entire thing; however, I think this is enough to identify any problems.

Answer 1

You can use DataTable's API to remove the corresponding row:

t.row("your selector here").remove().draw();

in row() you could use several kind of selectors. If you saved the row's id in a variable, simply use

t.row("#"+rowId).remove().draw();

Note that you have to call draw() after a remove, since datatables doesn't redraw itself after a remove due to performance reasons.

Answer 2

$('#pictures').DataTable().row("#YourRowId").remove().draw();

If the item you want to delete is the parent window;

window.parent.$('#pictures').DataTable().row("#YourRowId").remove().draw();

If you want to delete all the rows;

$('#pictures').DataTable().row().remove().draw();

You should pay attention to the JS version.