title: Knockout.js ToDo List
body: <p>I am trying to create a simple ToDo list by loosely following the interactive tutorial on the Knockout site.    </p>
  
  <p>I can add an item to a list, but I can't remove it. What am I doing wrong ??</p>
  
  <pre><code>function ToDo(stuff) {
      this.toDoItem = stuff;
  }
  
  function ToDoViewModel() {
  
      this.toDoItems = ko.observableArray([
          new ToDo("Watch Person of Interest"),
          new ToDo("Study for Midterm exam"),
          new ToDo("Buy groceries for Luis")
      ]);
  
      this.addToDoItem = function() {
          this.toDoItems.push(new ToDo($('.txt').val()));
          $('.txt').val('');
      }
  
      this.removeToDoItem = function(item) { 
          this.toDoItems.remove(item); 
      }
  }
  
  ko.applyBindings(new ToDoViewModel());
  </code></pre>
  
  <p>Here is the markup inside a 'body' tag:</p>
  
  <pre><code>&lt;table&gt;
  &lt;tr&gt;
      &lt;td&gt;ToDo List&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tbody data-bind="foreach: toDoItems"&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;label data-bind="text: toDoItem"&gt;&lt;/label&gt;&lt;/td&gt;            
          &lt;td&gt;&lt;a href="#" data-bind="click: $root.removeToDoItem"&gt;Remove&lt;/a&gt;&lt;/td&gt;
      &lt;/tr&gt;    
  &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;input class="txt"/&gt;
  &lt;button data-bind="click: addToDoItem"&gt;Add Item&lt;/button&gt;
  </code></pre>