Knockout GridView How to Delete Line?

Here is my HTLM Page:

<!DOCTYPE html>
<script src="Scripts/knockout-3.4.2.js" type="text/javascript"></script>
<script src="Scripts/jquery-3.1.1.min.js"></script>
<script src="Scripts/knockout.simpleGrid.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Knockout GridView Örnek</title>
<style>
    body { font-family: arial; font-size: 14px; }
.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.liveExample input { font-family: Arial; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; }

.ko-grid { margin-bottom: 1em; width: 25em; border: 1px solid silver; background-color:White; }
.ko-grid th { text-align:left; background-color: Black; color:White; }
.ko-grid td, th { padding: 0.4em; }
.ko-grid tr:nth-child(odd) { background-color: #DDD; }
.ko-grid-pageLinks { margin-bottom: 1em; }
.ko-grid-pageLinks a { padding: 0.5em; }
.ko-grid-pageLinks a.selected { background-color: Black; color: White; }
.liveExample { height:20em; overflow:auto }

li { list-style-type: disc; margin-left: 20px; }

</style>
</head>
<body>
    <div data-bind='simpleGrid: gridViewModel'></div>
     <div>Ad: </div> <input data-bind="value: Ad" /> <br />
     <div>Satılan: </div> <input data-bind="value: Satis" /> <br />
     <div>Fiyat: </div> <input data-bind="value: tutar" /> <br />
    <button data-bind='click: addItem'>
        Add item
    </button>

    <button data-bind='click: deleteFirst'>Delete first Row</button>

     <button data-bind='click: deleteLast'>Delete Last Row</button>

    <button data-bind='click: sortByName'>
        Sort by name
    </button>

    <button data-bind='click: jumpToFirstPage, enable: gridViewModel.currentPageIndex'>
        Jump to first page
    </button>
</body>
</html>

Here is my JavaScript:

<script type="text/javascript">
        var initialData = [
    { name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
    { name: "Speedy Coyote", sales: 89, price: 190.00 },
    { name: "Furious Lizard", sales: 152, price: 25.00 },
    { name: "Indifferent Monkey", sales: 1, price: 99.95 },
    { name: "Brooding Dragon", sales: 0, price: 6350 },
    { name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
    { name: "Optimistic Snail", sales: 420, price: 1.50 }
        ];

        var PagedGridModel = function (items) {
            this.items = ko.observableArray(items);

            this.sortByName = function () {
                this.items.sort(function (a, b) {
                    return a.name < b.name ? -1 : 1;
                });
            };

            this.jumpToFirstPage = function () {
                this.gridViewModel.currentPageIndex(0);
            };

            this.deleteFirst = function () {
                this.items.shift();
            }
            this.deleteLast = function () {
                this.items.pop();
            }
            this.removeGift = function (item) {
                this.initialData.remove(item);
            };
            this.gridViewModel = new ko.simpleGrid.viewModel({
                data: this.items,
                columns: [
                    { headerText: "Item Name", rowText: "name" },
                    { headerText: "Sales Count", rowText: "sales" },
                    { headerText: "Price", rowText: function (item) { return "$" + item.price.toFixed(2) } }
                ],
                pageSize: 4
            });

            this.Ad = ko.observable("");
            this.Satis = ko.observable("");
            this.tutar = ko.observable("");
            this.addItem = function () {
                if (this.Ad() != "" && this.Satis() != "" && this.tutar() != "") {
                    this.tutar(Number(this.tutar()));
                    this.Satis(Number(this.Satis()));
                    this.items.push({ name: this.Ad(), sales: this.Satis(), price: this.tutar() });
                    this.Ad("");
                    this.Satis("");
                    this.tutar("");
                }
            }.bind(this);
        };

        ko.applyBindings(new PagedGridModel(initialData));

    </script>

Here is my Grid JS:

(function () {
    // Private function
    function getColumnsForScaffolding(data) {
        if ((typeof data.length !== 'number') || data.length === 0) {
            return [];
        }
        var columns = [];
        for (var propertyName in data[0]) {
            columns.push({ headerText: propertyName, rowText: propertyName });
        }
        return columns;
    }

    ko.simpleGrid = {
        // Defines a view model class you can use to populate a grid
        viewModel: function (configuration) {
            this.data = configuration.data;
            this.currentPageIndex = ko.observable(0);
            this.pageSize = configuration.pageSize || 5;

            // If you don't specify columns configuration, we'll use scaffolding
            this.columns = configuration.columns || getColumnsForScaffolding(ko.unwrap(this.data));

            this.itemsOnCurrentPage = ko.computed(function () {
                var startIndex = this.pageSize * this.currentPageIndex();
                return ko.unwrap(this.data).slice(startIndex, startIndex + this.pageSize);
            }, this);

            this.maxPageIndex = ko.computed(function () {
                return Math.ceil(ko.unwrap(this.data).length / this.pageSize) - 1;
            }, this);
        }
    };

    // Templates used to render the grid
    var templateEngine = new ko.nativeTemplateEngine();

    templateEngine.addTemplate = function (templateName, templateMarkup) {
        document.write("<script type='text/html' id='" + templateName + "'>" + templateMarkup + "<" + "/script>");
    };

    templateEngine.addTemplate("ko_simpleGrid_grid", "\
                    <table class=\"ko-grid\" cellspacing=\"0\">\
                        <thead>\
                            <tr data-bind=\"foreach: columns\">\
                               <th data-bind=\"text: headerText\"></th>\
                            </tr>\
                        </thead>\
                        <tbody data-bind=\"foreach: itemsOnCurrentPage\">\
                           <tr data-bind=\"foreach: $parent.columns\">\
                               <td data-bind=\"text: typeof rowText == 'function' ? rowText($parent) : $parent[rowText] \"></td>\
                               <td><a href=\"#\" data-bind=\"click: $root.removeGift\">Delete</a></td>\
                            </tr>\
                        </tbody>\
                    </table>");
    templateEngine.addTemplate("ko_simpleGrid_pageLinks", "\
                    <div class=\"ko-grid-pageLinks\">\
                        <span>Page:</span>\
                        <!-- ko foreach: ko.utils.range(0, maxPageIndex) -->\
                               <a href=\"#\" data-bind=\"text: $data + 1, click: function() { $root.currentPageIndex($data) }, css: { selected: $data == $root.currentPageIndex() }\">\
                            </a>\
                        <!-- /ko -->\
                    </div>");

    // The "simpleGrid" binding
    ko.bindingHandlers.simpleGrid = {
        init: function () {
            return { 'controlsDescendantBindings': true };
        },
        // This method is called to initialize the node, and will also be called again if you change what the grid is bound to
        update: function (element, viewModelAccessor, allBindings) {
            var viewModel = viewModelAccessor();

            // Empty the element
            while (element.firstChild)
                ko.removeNode(element.firstChild);

            // Allow the default templates to be overridden
            var gridTemplateName = allBindings.get('simpleGridTemplate') || "ko_simpleGrid_grid",
                pageLinksTemplateName = allBindings.get('simpleGridPagerTemplate') || "ko_simpleGrid_pageLinks";

            // Render the main grid
            var gridContainer = element.appendChild(document.createElement("DIV"));
            ko.renderTemplate(gridTemplateName, viewModel, { templateEngine: templateEngine }, gridContainer, "replaceNode");

            // Render the page links
            var pageLinksContainer = element.appendChild(document.createElement("DIV"));
            ko.renderTemplate(pageLinksTemplateName, viewModel, { templateEngine: templateEngine }, pageLinksContainer, "replaceNode");
        }
    };
})();

I want like this

But Delete not working and repeat 3 times always 1 line. I want it 1 Line 1 delete and I want to delete it. How I can do this ? I need your help guys. Thank you in advance.