JQuery Remove() doesn't actually delete the row(s) from grid
<p>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.</p>

<p>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.</p>

<p>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.</p>

<p>I created a basic dojo <a href="http://dojo.telerik.com/@Cwm/AfUHo" rel="nofollow noreferrer">here</a> to show that what I am saying is actually happening.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(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: "&lt;input id='checkAll', type='checkbox', class='check-box' /&gt;",
        template: "&lt;input name='Selected' class='checkbox' type='checkbox'&gt;",
        width: "30px"
      }, {
        field: "DealerDiscount",
        title: "Dealer Discount",
        template: "&lt;div style='text-align: center'&gt;#= DealerDiscount #&lt;/div&gt;"
      }, {
        title: "Delete",
        template: "&lt;button type='button' class='removeit'&gt;X&lt;/button&gt;"
      }
    ],
    scrollable: true,
    height: 856
  });
}

$(document).on('click', 'button.removeit', function() {
  $(this).closest('tr').remove();
  return false;
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css"&gt;
&lt;link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css"&gt;
&lt;link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.default.min.css"&gt;
&lt;link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css"&gt;
&lt;script src="http://code.jquery.com/jquery-1.12.3.min.js"&gt;&lt;/script&gt;
&lt;script src="http://kendo.cdn.telerik.com/2016.3.1028/js/angular.min.js"&gt;&lt;/script&gt;
&lt;script src="http://kendo.cdn.telerik.com/2016.3.1028/js/jszip.min.js"&gt;&lt;/script&gt;
&lt;script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"&gt;&lt;/script&gt;

&lt;div id="grid"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>