Q:

remove child from parent in knockout

model
public class model
  {
    public int modelid { get; set; }
    public string name { get; set; }

    public List<childModel> childModel{ get; set; }
}
public class childModel
{

    public int childModelid { get; set; }
    public string childname { get; set; }
}

java script
@{
   var datam = new JavaScriptSerializer().Serialize(Model);
 }
var helloWorldModel = {
        model: ko.mapping.fromJS(@Html.Raw(datam)),
        dele: function (models) {
            helloWorldModel.model.remove(models);
        }
    }

 ko.applyBindings(helloWorldModel);

html
    <span data-bind="foreach:model">
      <span data-bind="text : name"></span>

       <span data-bind="foreach:childmodel">
          <input type="text" data-bind="value:childname" />
       </span>

    <input type="button" data-bind="click:$parent.dele" value="delete parent" />
  </span>

so i can remove model, but is there any way to remove childmodel whith this structure?
something like this:
        deleChildModel: function (Childmodels) {
            helloWorldModel.model.childModel.remove(Childmodels);
        }

i can add add modelid to ChildModel and then use 
           deleChildModel: function (Childmodels) {
            helloWorldModel.model()[Childmodels.modelid].childModel.remove(Childmodels);
            }

but i am looking for something simpler

A:

You can use bind to have the button pass the parent as well as the child to the deleteChild function. The first argument to bind provides the context (this) for when the resulting function is called.

var models = [{
  name: 'One',
  childmodel: [{
    childname: "SubOne"
  }]
}, {
  name: 'Two',
  childmodel: [{
    childname: "SubTwo"
  }]
}];

var vm = (function() {
  var self = {
    model: ko.mapping.fromJS(models),
    dele: function(item) {
      self.model.remove(item);
    },
    deleteChild: function(child) {
      var parent = this;
      parent.childmodel.remove(child);
    }
  };
  return self;
}());

ko.applyBindings(vm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<span data-bind="foreach:model">
      <span data-bind="text : name"></span>

<span data-bind="foreach:childmodel">
          <input type="text" data-bind="value:childname" />
          <button data-bind="click:$root.deleteChild.bind($parent)">Delete Child</button>
       </span>

<input type="button" data-bind="click:$parent.dele" value="delete parent" />
</span>

