remove selected elements from multi list view - kendo-ui

Question

Using Kendo UI, please tell me how can we remove element from multi listview. When i am selecting any item it is giving me value but i am unable to remove selected element.
PSB code:
var data = [
{ id: 1, text: "text 1" },
{ id: 2, text: "text 2" },
{ id: 3, text: "text 3" }
];
var d = $("#listview").kendoListView({
dataSource: data,
template: kendo.template($("#template").html()),
selectable: "multiple",
change: function() {
var index = this.select().index(),
dataItem = this.dataSource.view()[index];
var d = $("#listview").data("kendoListView");
alert(d.element.children().first());
d.remove(dataItem.text);
//log("id: " + dataItem.id + ", text: " + dataItem.text);
var selected = $.map(this.select(), function(item) {
return data[$(item).index()].id;
});
//data.remove(selected.id);
//console.log(data);
console.log(selected);
//console.log("[" + selected.join(", ") + "]");
}
});

Answer 1

For removing an element is:
// Find selected
var idx = this.select().index();
// Get reference to the DataSource
var ds = d.data("kendoListView").dataSource;
ds.remove(ds.at(idx));
This would remove the selected item as soon as you click on it (but doing it in change event handler does not actually allow you to remove multiple items).
But you can also directly remove one single item directly from the list using remove method:
// Find selected
var selected = this.select();
d.data("kendoListView").remove(selected);
Check it here, click on an item and it will get removed.
The question is that these interfaces are able to remove one item per call. If you want to remove many, you can iterate on them:
// Find selected
var items = d.select();
$.each(items, function(idx, elem) {
d.remove($(elem));
});
See it here, select many and then click on "Remove" button.