KnockoutJs beta 3.0 - How do you destroy child elements?

http://stackoverflow.com/questions/7824700/knockoutjs-beta-3-0-how-do-you-destroy-child-elements

by photo_tom

HTML

<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.debug.js"></script>
<ul data-bind="foreach: items">
    <li>
        <span data-bind="text: name"></span>
        <button class="removeButton">x</button>
        <ul data-bind="foreach: subItems">
            <li>
                <span data-bind="text: name"></span>
                <button class="removeButton">x</button>
            </li>
        </ul>
    </li>
</ul>

CSS

li { margin-left: 15px; }

JavaScript

function Item(name, parent, addSubItems) {
    this.name = ko.observable(name);
    this.subItems = ko.observableArray();
   
    if (addSubItems) {
        this.subItems.push(new Item(name + "1", this.subItems));
        this.subItems.push(new Item(name + "2", this.subItems));
        this.subItems.push(new Item(name + "3", this.subItems));
    }
    
    this.destroyMe = function() {
        parent.destroy(this);
    }.bind(this);
}

var viewModel = {
    items: ko.observableArray()
};

viewModel.items.push(new Item("A", viewModel.items, true));
viewModel.items.push(new Item("B", viewModel.items, true));
viewModel.items.push(new Item("C", viewModel.items, true));
                     

ko.applyBindings(viewModel);

$(".removeButton").live("click", function() {
    ko.dataFor(this).destroyMe();
});