title: Remove an item from nested observableArray
body: <p>Hey I am trying to remove a item from a inner(nested) observableArray as following, but the Remove Button doesn't work (for the inner foreach items).</p>
  
  <p><a href="http://jsfiddle.net/aDahT/1871/" rel="nofollow">http://jsfiddle.net/aDahT/1871/</a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;h4&gt;People&lt;/h4&gt;
  &lt;ul data-bind="foreach: peoples"&gt;
      &lt;li&gt;
          Name at position &lt;span data-bind="text: $index"&gt; &lt;/span&gt;:
          &lt;span data-bind="text: name"&gt; &lt;/span&gt;
          &lt;a href="#" data-bind="click: $parent.removePerson"&gt;Remove&lt;/a&gt;
          &lt;ul data-bind="foreach:people"&gt;
               &lt;li&gt;
                  &lt;span data-bind="text: $data"&gt;&lt;/span&gt;
                   &lt;button data-bind="click: $parent.deletePerson"&gt;Remove&lt;/button&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;button data-bind="click: addPerson"&gt;Add&lt;/button&gt;
  </code></pre>
  
  <p>Script:</p>
  
  <pre><code>var Person = function(name, children){
   var self = this;
      self.name = name;
      self.people =  ko.observableArray(children);
      self.deletePerson = function() {
          alert(JSON.stringify(self));
          self.people.remove(this);
      }
  }
  
  
  function AppViewModel() {
      var self = this;
  
      self.peoples = ko.observableArray([
          new Person( 'Bert', ['baa', 'bbb'] ),
          new Person('Charles', ["caa", "cbb"] )
      ]);
  
      self.addPerson = function() {
          alert(this);
          self.peoples.push(new Person( "New" ,["Daa", "Dbb"] ));
      }.bind(this);
  
      self.removePerson = function() {
  
          self.peoples.remove(this);
      }
  }
  
  ko.applyBindings(new AppViewModel());
  </code></pre>
  
  <p>Can anyone help?
  Thanks first.</p>