title: remove from observableArray- knockoutjs
body: <p>I'm sure this will be an easy answer for somebody. I have the following ViewModel:</p>
  
  <pre><code>@{
      var initialData = new JavaScriptSerializer().Serialize(Model);
  }
  var data = @Html.Raw(initialData);
  function ViewModel(data) {
      var self = this;
      self.Name = ko.observable(data.Name);
      self.Items = ko.observableArray(data.Items);
      self.addItem = function() { self.Items.push(""); };
      self.removeItem = function(data) { self.Items.remove(data); }
  }
  $(document).ready(function() {ko.applyBindings(new ViewModel(data)); });
  </code></pre>
  
  <p>And the following View:</p>
  
  <pre><code>&lt;div&gt;
      Name: &lt;span data-bind="text: Name"&gt;&lt;/span&gt;
  &lt;/div&gt;
  &lt;div&gt;
      Items: &lt;button data-bind="click: addItem"&gt;Add Item&lt;/button&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;table&gt;
          &lt;tbody data-bind="template: { name: 'itemTemplate', foreach: Items }"&gt;&lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  &lt;script type="text/html" id="itemTemplate"&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;input data-bind="value: $data" /&gt;
              &lt;a href="#" data-bind="click: function() {$parent.removeItem($data)}"&gt;Remove Item&lt;/a&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>Everything seems to work correctly except for <code>removeItem</code>. When new rows have been added, and "Remove Item" is clicked on an empty new row, all of the new rows will be removed with it. I've looked at tons of knockout tutorials trying to get this to work, and my method seems to be a valid attempt, but obviously... I must be missing something. Any suggestions?</p>