title: Removing Self From observableArray in knockoutJS
body: <p>I'm using knockoutjs to create a treeview of divisions. Next to each node will be three buttons: 1)New child(applies to the node it's next to 2) Remove(This removes the node it's next to, and 3) Copy, which copies the node and all it's children and creates a new node under the parent.</p>
  
  <p>I've got the New button down, and now I'm working on the remove button. I can't seem to get it to work, and instead of doing anything useful it just refreshes the entire page. Here's the code:</p>
  
  <p>View:</p>
  
  <pre><code>&lt;h2&gt;Skill &amp; Weight Divisions&lt;/h2&gt;
          &lt;span data-bind="text: tournamentname"&gt;&lt;/span&gt;&lt;button data-bind="click: addDivision"&gt;&lt;img src="new.png"/&gt;&lt;/button&gt;
          &lt;ul data-bind="template: { name: 'divisionTemplate', foreach: divisions }"&gt;&lt;/ul&gt;
  </code></pre>
  
  <p>Template:</p>
  
  <pre><code>&lt;script id="divisionTemplate" type="text/html"&gt;
     &lt;li data-bind="style: {'background-color':color}"&gt;
         &lt;input data-bind="value: name"/&gt;&lt;button data-bind="click: addDivision"&gt;&lt;img src="new.png"/&gt;&lt;/button&gt;&lt;button data-bind="click: $parent.removeDivision"&gt;&lt;img src="remove.png"/&gt;&lt;/button&gt;&lt;button data-bind="click: $parent.copyDivision"&gt;&lt;img src="copy.png"/&gt;&lt;/button&gt;
         &lt;ul data-bind="template: { 'if': children, name: 'divisionTemplate', foreach: children }"&gt;&lt;/ul&gt;
      &lt;/li&gt;       
  &lt;/script&gt;
  </code></pre>
  
  <p>View Model and appropriate helper function:</p>
  
  <pre><code>function division(id, name, filter, children) {
          this.id = ko.observable(id);
          this.name = ko.observable(name);
          this.filter = ko.observable(filter)
          if(children){
              this.children = ko.observableArray(children);   
          }else{
              this.children = ko.observableArray();   
          }
          this.addDivision = function(){
              this.children.push(new division("", "", ""));   
          }
          this.removeDivision = function(division){
              this.children.remove(division);
          }
          this.copyDivision = function(division){
              this.children.push(division);   
          }
          this.color = randColor();
      };
      function tournamentViewModel(){
          var self= this;
          self.tournamentname = ko.observable('NO NAME YET');
          self.districts = ko.observableArray([new district('Provo',1),new district('Salt Lake City',2),new district('St. George',3)]);
          self.district = ko.observable(self.districts()[0]);
          self.regions = ko.observableArray([new region('Utah',1),new region('Idaho',2)]);
          self.region = ko.observable(self.regions()[0]);
          self.location = ko.observable('WHEREVER YOU WANT');
          self.eventdate = ko.observable('');
          self.startTime = ko.observable('');
          self.image = ko.observable();
          self.flyer = ko.computed(function(){
              var flyerHTML = '&lt;span style="text-align:center;padding:10px;"&gt;&lt;h1&gt;'+self.tournamentname()+'&lt;/h1&gt;&lt;img src="'+self.image()+'"/&gt;&lt;br/&gt;';
              flyerHTML += 'District: ' + self.district().districtName + ' Region: ' + self.region().regionName+'&lt;br&gt;&lt;br&gt;';
              flyerHTML += '&lt;h2&gt;WHEN: '+self.eventdate()+' '+self.startTime()+'&lt;/h2&gt;';
              flyerHTML += '&lt;h2&gt;WHERE: '+self.location()+'&lt;/h2&gt;';
              flyerHTML += '&lt;img src="http://maps.googleapis.com/maps/api/staticmap?center='+encodeURI(self.location())+'&amp;zoom=12&amp;size=200x200&amp;markers=color:blue%7Clabel:S%7C'+encodeURI(self.location())+'&amp;maptype=roadmap&amp;sensor=false"/&gt;';
              return flyerHTML;
          }, self);
          self.clearImage = function(){
              self.image(''); 
          }
          self.tournamentID = ko.computed(function(){return 't_'+self.district()+'_'+self.region()+'_'+self.eventdate()}, self);
          self.pricingStructures = ko.observableArray([new pricingStructure(3,2.99), new pricingStructure(1,1.99)]);
          self.removePricingStructure = function(pricingStructure){
              self.pricingStructures.remove(pricingStructure); 
          }
          self.addPricingStructure = function(){
              self.pricingStructures.push(new pricingStructure("", ""));  
          }
          self.promoCodes = ko.observableArray();
          self.promoTypes = ['%','$'];
          self.removePromoCode = function(promoCode){
              self.promoCodes.remove(promoCode); 
          }
          self.addPromoCode = function(){
              self.promoCodes.push(new promoCode("", ""));    
          }
          self.divisions = ko.observableArray([new division(1, "Men","",[new division(2,"Gi"), new division(3,"No-Gi")])]);
          self.addDivision = function(){
              self.divisions.push(new division("", "", ""));  
          }
  
      }
      ko.applyBindings(new tournamentViewModel());
  </code></pre>
  
  <p>My main question in all of this is this: Is there a way to access an object's parent array in order to remove that very object from the array? Thanks in advance for the help!</p>
  
  <p>EDIT: Here's a jsFiddle: <a href="http://jsfiddle.net/eqY7Z/" rel="noreferrer">http://jsfiddle.net/eqY7Z/</a> However it doesn't seem to be working at all there. If you guys can't get it going, I'll include the link to my site where it's being hosted so you can take a good look at it.</p>