kendo ui - JQuery Remove() doesn't actually delete the row(s) from grid -

i been working on removing rows grid , after searching able remove rows grid. yahoo moment lasted brief few seconds because went double check row deleted , noticed isn't deleted per say, hidden.

i found out using filter have in grid , when filtered 1 of removed rows data, appeared again, , once cleared filter deleted rows appeared again.

so confused on number of things, why rows hidden , not removed , how remove rows grid without having use ajax delete row rebind table again, , reason why wouldnt because data in grid lost , have reentered again. because looking @ now, if hiding row when go take data grid , add database i'm going have issue because have rows being removed reason.

i created basic dojo here show saying happening.

$(document).ready(function() {    var junkdata = [{        "discountid": 1,        "dealerdiscount": "15"      }, {        "discountid": 2,        "dealerdiscount": "16"      }, {        "discountid": 3,        "dealerdiscount": "17"      }, {        "discountid": 4,        "dealerdiscount": "18"      }, {        "discountid": 5,        "dealerdiscount": "19"      }, {        "discountid": 6,        "dealerdiscount": "20"      }, {        "discountid": 7,        "dealerdiscount": "21"      }, {        "discountid": 8,        "dealerdiscount": "22"      }, {        "discountid": 9,        "dealerdiscount": "23"      }      ];      showgrid(junkdata);  });    function showgrid(userdata) {      $("#grid").kendogrid({      norecords: {        template: "no records available"      },      datasource: {        data: userdata      },      schema: {        model: {          discountid: "discountid"        }      },      filterable: {        mode: "row"      },      columns: [{          title: "<input id='checkall', type='checkbox', class='check-box' />",          template: "<input name='selected' class='checkbox' type='checkbox'>",          width: "30px"        }, {          field: "dealerdiscount",          title: "dealer discount",          template: "<div style='text-align: center'>#= dealerdiscount #</div>"        }, {          title: "delete",          template: "<button type='button' class='removeit'>x</button>"        }      ],      scrollable: true,      height: 856    });  }    $(document).on('click', 'button.removeit', function() {    $(this).closest('tr').remove();    return false;  });

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css">  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css">  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.default.min.css">  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css">  <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>  <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/angular.min.js"></script>  <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/jszip.min.js"></script>  <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>    <div id="grid"></div>

you have removed row ui still record/data available in grid'd model/datasource must remove data/record model also.

please try below code snippet.

$(document).on('click', 'button.removeit', function () {    var currentrow = $(this).closest('tr');    currentrow.remove();    var grid1 = $('#grid').data('kendogrid');    var curritem = grid1.datasource.getbyuid($(currentrow).data('uid'));    grid1.datasource.remove(curritem);      return false; });