Delete Item from List using Knockout.js

http://stackoverflow.com/questions/8704559/delete-item-from-list-using-knockout-js

by rniemeyer

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<div id="main" data-bind="foreach: model.Imgs">
    <div style="float:left; margin: 10px 10px 10px 0;">
        <div>
            <a data-bind="text: Filename, attr: { href: Filename }"></a>
        </div>
        <div class="del">Delete</div>
    </div>
</div>

JavaScript

var viewModel = {
    model: {
        Imgs: [
            { Filename: "one.jpg" },
            { Filename: "two.jpg" },
            { Filename: "three.jpg" } 
        ]
    },
    deleteImage: function(item) {
        alert(item.Filename + ' deleted.');
    }
};

ko.applyBindings(viewModel);

$("#main").on("click", ".del", function() {
   var data = ko.dataFor(this);
   viewModel.deleteImage(data); 
});