title: KnockoutJS remove item from observable array. Item is listitem within ul, which was generated by foreach
body: <p>Using KnockoutJS, how can I remove an item from an observable array? I want to be able to click on the listitem, and remove the item from the array (and thereby the list).</p>
  
  <p>The code sample below reports: 'this.expertise is undefined'.</p>
  
  <p>Do I need to define some sort of expertise object, and then call it from within there?  </p>
  
  <pre><code>&lt;ul data-bind="foreach: expertise"&gt;
      &lt;li data-bind="text: Key, click: $parent.removeExpertise"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;script type="text/javascript"&gt;
      $(function () {
          function AppViewModel() {
  
              this.removeExpertise = function (expertise) {
                  this.expertise.remove(expertise);
  
              };
  
              this.expertise = ko.observable([
                  { Key: 'Charles', Value: 'Charlesforth' },
                  { Key: 'Denise', Value: 'Dentiste' }
              ]);
          }
  
          // Activates knockout.js
          jQuery(document).ready(function () {
              ko.applyBindings(new AppViewModel());
          });
      });
  &lt;/script&gt;
  </code></pre>