I can not remove an item from drag and drop + sortable list

Hello, I have the following situation ... I have to develop a screen where the wheels of a truck are assembled. To do this, the customer needs a "drag" functionality of the vehicle parts.

The screen should have two divs, the first one should contain the parts that can be added. The second one should store what is dragged and can reorder with the same click function and drag.

You should also allow removal of these pieces from the second div, removal will be done by dragging to a third div

With my current code, it does not remove at all. It's as if he could not identify the id of the wheel. Here's my current code.

<div id="remover">Remover!</div>
<div id="horizontal">
    <div id="spldvEsq">
        <div id="listA"></div>
    </div>
    <div id="splDvDir">
        <div id="listB"></div>
    </div>
</div>


$("#horizontal").kendoSplitter({
panes: [
    { collapsible: true,  collapsed: false },
    { collapsible: true, collapsed: false }
]});

var listA_DS= new kendo.data.DataSource({
data: [
    { id: 0, item: "Traseira", img: "Imagens/Rodado0.png" },
    { id: 1, item: "Estepe Duplo Traseiro", img: "Imagens/Rodado1.png" },
    { id: 2, item: "Estepe Duplo", img: "Imagens/Rodado2.png" },
    { id: 3, item: "Estepe Simples", img: "Imagens/Rodado3.png" },
    { id: 4, item: "Eixo Duplo", img: "Imagens/Rodado4.png" },
    { id: 5, item: "Eixo Simples", img: "Imagens/Rodado5.png" },
    { id: 6, item: "Extensor", img: "Imagens/Rodado6.png" },
    { id: 7, item: "Extensor Sanfonado", img: "Imagens/Rodado7.png" },
    { id: 8, item: "Dianteira", img: "Imagens/Rodado8.png" },
    { id: 9, item: "Finalizador", img: "Imagens/Rodado9.png" }
],
schema: {
    model: {
        id: "id",
        fields: {
            id: { type: "number" },
            item: { type: "string" },
            img: { type: "string" }
        }
    }
}});


var listB_DS= new kendo.data.DataSource({
data: [ /* still no data */ ],
schema: {
    model: {
        id: "id",
        fields: {
            id: { type: "number" },
            item: { type: "string" },
            img: { type: "string" }
        }
    }
}});


function addStyling(e) {
this.element.css({
    "background-color": "#e0e0e0",
    "opacity": 0.6
});}

function resetStyling(e) {
this.element.css({
    "background-color": "transparent",
    "opacity": 1
});}

$("#listA").kendoListView({
dataSource: listA_DS,
 template: "<div class='item'><table> <tr> <td><img src='#: img #' /></td> <td style='vertical-align: middle;'>#: item #</td> </tr></table></div>"});


$("#listA").kendoDraggable({
filter: ".item",
hint: function(element) {
    return element.clone().css({
        "opacity": 0.6,
        "background-color": "#0cf"
    });
}});



 $("#listB").kendoListView({
dataSource: listB_DS,
template: "<div class='item'><table> <tr> <td><img src='#: img #' /></td> <td style='vertical-align: middle;'>#: item #</td> </tr></table></div>"});

$("#listB").kendoDraggable({
filter: ".item",
hint: function(element) {
    return element.clone().css({
        "opacity": 0.6,
        "background-color": "#0cf"
    });
}});

$("#listB").kendoDropTarget({
dragenter: addStyling,
dragleave: resetStyling,
drop: function(e) { 
    var draggableElement = e.draggable.currentTarget,
    dataItem = listA_DS.getByUid(draggableElement.data("uid"));
    dataItem.id = dataItem.id;
    listB_DS.add(dataItem); 
    resetStyling.call(this); 
}});

 $("#remover").kendoDropTarget({
dragenter: addStyling,
dragleave: resetStyling,
drop: function(e) { 
    var draggableElement = e.draggable.currentTarget,
    dataItem = listB_DS.getByUid(draggableElement.data("uid")); 
    listB_DS.remove(dataItem.id); 
    resetStyling.call(this); 
}});
#listA, #listB {
    width: 99%;
    height: 99%;
    border-color: transparent;
}

#remover{
  height: 50px;
  border: 2px solid #ccc;
}

.item {
    margin: 5px;
    padding: 5px;
    text-align: center;
    border: 2px solid #ccc;
    border-radius: 5px;
    float: left;
}