Removing item from array created by mapping not working

Question

I have an array created using the Knockout mapping plugin. In my markup, the user selects a 'selectedItem', clicking on the delete button opens a custom confirmation modal and I want clicking on the delete button in the modal to remove that item. As hard as I try I cannot seem to crack the syntax to get it working. When I call the remove function, I get an error 'Uncaught TypeError: undefined is not a function'.

As you can see, I have some alert statements which show that neither the dataModel.items array not the selectedItems property are undefined. I would appreciate any help with getting this up and running.

My code:

<input type="hidden" id="serverJSON"
   value="@Newtonsoft.Json.JsonConvert.SerializeObject(Model)" />

<div class="select-wrapper">
<span class="block-label">Options:</span>
    <ol class="" data-bind="foreach: items.dataItems">
        <li class="ui-widget-content" data-bind='click: $parent.selectedItem'><!--ko text: Name--><!--/ko--></li>
    </ol>
</div>

<label for="add-new-option">Add New Option</label><input type="submit" name="add-new-option" value="Add New Option" id="add-new-option" class="modal-add-new-option" />

<label for="edit-option" class="modal-edit-option">Edit Option</label><input type="submit" name="edit-option" value="Edit Option" id="edit-option" data-bind="enable:selectedItem.length > 0" class="modal-edit-option" />

<label for="delete-option">Delete Option</label><input type="submit" name="delete-option" value="Delete Option" id="delete-option" class="modal-delete-option" />

<div class="boxes modal-delete-option">
<div class="window">
    <div class="inner-modal">
        <div class="modal-header">
            <h3 id="deleteOptionHeader">
                Delete Option
            </h3>
            <a href="#">
                <img class="close-modal" src="@Url.Content("~/Images/Sub/modal-close.png")" alt="Close Modal" />
            </a>
        </div>
        <div class="section modal-content">
            <div class="modal-content-inner">
                <div class="select-wrapper" style="margin-bottom: 12px;" data-bind="with:selectedItem">
                    <p>Are you sure you want to delete <em><span id="delete-option-caption" data-bind="text:Name"></span></em> as an option?</p>
                </div>
                <label for="delete-option">
                    Delete
                </label>
                <input type="submit" name="delete-option-submit" value="Delete" id="delete-option" class="delete-button fl close-modal" data-bind="click: removeItem" 
                       style="" />
                @*data-bind="click: $parent.removeItem"*@
                <input type="submit" name="cancel-option" value="Cancel" id="cancel-option" class="cancel-button fl close-modal"
                       style="" />
            </div>
        </div>
    </div>
</div>
</div>

var dataModel = function () {
    var self = this;
    self.items = ko.mapping.fromJS(JSON.parse($("#serverJSON").val()));
    self.selectedItem = ko.observable();
    self.removeItem = function () { alert(self.selectedItem); alert(self.items);self.items.remove(self.selectedItem);};
    //self.updateItem = function () { };
    //self.addedItem = ko.observable();
    //self.addItem = function () { self.items.push(self.addedItem); };
};

ko.applyBindings(new dataModel());

UPDATED with list of options:

<div class="select-wrapper">
<span class="block-label">Options:</span>
    <ol class="" data-bind="foreach: items.dataItems">
        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Albanian<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Arabic<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Armenian<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Bengali<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Bosnian<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Bulgarian<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Burmese<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Cantonese<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Chinese<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Creole<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Croatian<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Czech<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Dutch<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Farsi<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Filipino<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->French<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Fujianese<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->German<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Greek<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Gujarati<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Hebrew<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Hindi<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Hungarian<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Ibibio<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Italian<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Japanese<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Kannada<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Korean<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Malayalam<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Mandarin<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Marathi<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Persian<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Portuguese<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Punjabi<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Romanian<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Russian<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Serbian<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Sindhi<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Spanish<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Swedish<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Tagalog<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Taiwanese<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Tamil<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Telugu<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Thai<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Tigrinya<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Turkish<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Ukrainian<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Urdu<!--/ko--></li>

        <li class="ui-widget-content" data-bind="click: $parent.selectedItem"><!--ko text: Name-->Vietnamese<!--/ko--></li>
    </ol>

Answer 1

May be you need to evaluate a ko observable before doing some operation on it. Try this -

self.removeItem = function () { alert(self.selectedItem()); alert(self.items());self.items.remove(self.selectedItem());};

UPDATE

Looking at your data, I think you should try $root instead of $parent in the click binding in the html.