Delete ListView item by clicking on rowdelete detail button

[Sherry]

Hi,

I am trying to create a ListView of items. I am trying to make it such that when a user clicks on the "rowdelete" detail button, that particular row gets updated or deleted in the dataSource, and the ListView gets synced to that.

I declare my list view with a template like this:

<ul id="flat-listview" style="font-size: .8em"></ul>
<script type="text/x-kendo-template" id="customListViewTemplate">
${name}: ${qty}<a data-role="detailbutton" data-style="rowdelete" data-click="deleteItem"></a>
</script>

The functions to refresh the ListView and add items to it are as follows:
<script>
function reinitListView() {
$("#flat-listview").kendoMobileListView({ 
dataSource: kendo.data.DataSource.create({data: dataList}), 
template: $("#customListViewTemplate").html(),
});
}

function addToList(item) {
for (var i = 0; i < dataList.length; i++) {

if (dataList[i].name == item) {
dataList[i].qty++;
reinitListView();
return;
}
}
dr = new Object();
dr.name = item;
dr.qty = 1;
dataList.push(dr);
reinitListView();
}
</script>

I tried writing a function called deleteItem (called when the button is clicked), but I don't know how to access the list view row from there.