JSGrid Batch Delete

HTML

<link rel="stylesheet" href="http://js-grid.com/css/jsgrid.min.css">
<link rel="stylesheet" href="http://js-grid.com/css/jsgrid-theme.min.css">
<script src="http://js-grid.com/js/jsgrid.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<div id="jsgrid"></div>
<button type="button" id="deleteAll">Delete Selected</button>
<button type="button" id="showData">Show Data</button>

JavaScript

var data = [
    { Name: "John" },
    { Name: "Jimmy" },
    { Name: "Tom" },
    { Name: "Frank" },
    { Name: "Peter" }
];

var selectedItems = [];
    
$("#jsgrid").jsGrid({
    confirmDeleting: false,
    autoload: true,
    width: 200,
    controller: {
        loadData: function() {
            return data;
        }
    },
    fields: [
        {
            itemTemplate: function(val, item) {
                return $("<input>")
                    .attr("type", "checkbox")
                    .on("change", function() {
                        if($(this).is(":checked")) {
                            selectedItems.push(item);
                        } else {
                            selectedItems = $.grep(selectedItems, function(i) {
                                 return i !== item;
                            });
                        }
                    });
            },
            align: "center",
            width: 5
        },
        { type: "text", name: "Name" }
    ]
});

$("#deleteAll").click(function() {
    $.each(selectedItems, function(_, item) {
        $("#jsgrid").jsGrid("deleteItem", item);
    });
});

$("#showData").click(function() {
    alert(JSON.stringify(data));
});