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

Question

I been working on removing rows from a grid and finally after some searching am now able to remove rows from my grid. It was a yahoo moment that lasted only a brief few seconds because I went to double check that the row was truly deleted and noticed that it isn't actually deleted per say, just hidden.

I found this out by using the filter that I have in the grid and when I filtered for one of the removed rows data, it appeared again, and once I cleared the filter all deleted rows appeared again.

So now I am confused on a number of things, why are the rows only hidden and not really removed and how do I actually remove rows from the grid without having to use ajax to delete the row then rebind the table again, and the reason why this wouldnt be good is because any data that is in the grid will be lost and have to be reentered again. Because as I am looking at it now, if I am just hiding the row then when I go to take all the data from the grid and add it to a database that I'm going to have an issue because I have rows being removed for a reason.

I created a basic dojo here to show that what I am saying is actually 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>

Answer 1

You have removed only row from UI but the still that record/data available in grid'd model/datasource so you must remove the data/record from the model also.

Please try with the 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;
});