title: Backbone.js : Remove an item from a collection
body: <p>I'm using backbone.js to implement a buddy list aka Roster.  My backbone view for the Roster collection and individual <code>rosterEntry</code> are as follows:</p>
  
  <pre><code>    Slx.Roster.Views.RosterEntry = Backbone.View.extend({
      tagName: "li",
      className : "rosterEntry clearfix",
      templateSelector: '#rosterEntryTemplate',
  
      initialize: function() {
          _.bindAll(this, 'render');
          this.model.bind('change', this.render);
          this.model.bind('remove', this.remove);
          this.template = _.template($("#rosterEntryTemplate").html());
      },
  
      remove: function () {
          debug.log("Called remove event on model");
          $(this.el).remove();
      },
      render: function() {
          var renderedContent = this.template(this.model.toJSON());
          this.id = this.model.Id;
          $(this.el).attr('id', "friendid-" + this.model.get("id")).html(renderedContent);
          return this;
      }
  });
  
      Slx.Roster.Views.Roster = Backbone.View.extend({
          el: "div#roster-container",
          initialize: function () {
              _.bindAll(this, 'render', 'add', 'remove');
              this.template = _.template($("#rosterTemplate").html());
              this.collection.bind('reset', this.render);
              this.collection.bind('add', this.add);
              this.collection.bind('remove', this.remove);
          },
          add: function (rosterEntry) {
              var view = new Slx.Roster.Views.RosterEntry(
                  {
                      model: rosterEntry
                  });
              $(this.el).append(view.render().el);
          },
          remove: function (model) {  // if I ommit this then the whole collection is removed!!
              debug.log("called remomve on collection");
          },
          render: function () {
              var $rosterEntries, collection = this.collection;
  
              $(this.el).html(this.template({}));
              $rosterEntries = this.$('#friend-list');
  
              _.each(collection.models, function (model) {
                  var rosterEntryView = new Slx.Roster.Views.RosterEntry({
                      model: model,
                      collection: collection
                  });
  
                  $(this.el).find("ul#friend-list").append(rosterEntryView.render().el);
              }, this);
  
              return this;
          }
      })
  </code></pre>
  
  <p>I'm testing for now using the Firebug console and can populate the roster just fine by executing the following:</p>
  
  <pre><code>collection = new Slx.Roster.Collection
  view = new Slx.Roster.Views.Roster({collection:collection})
  collection.fetch()
  </code></pre>
  
  <p>Adding to a collection also works fine, by executing the following in the Firebug console:</p>
  
  <p><code>collection.add(new Slx.Roster.Model({username:"mickeymouse"})</code></p>
  
  <p>and the new <code>rosterEntry</code> is added to the Roster.</p>
  
  <p>My problem is that <code>collection.remove(5)</code> removes from the in-memory collection, but does nothing to update the DOM.</p>
  
  <p>Strangely, if I ommit the <code>remove()</code> function from the Roster View, all the entries in the roster are removed.  If I add this method with nothing in it but a console log, it the remove method on both the Roster and <code>RosterEntry</code> views is called - although I'm not sure why but they are out of order!</p>
  
  <pre><code>["Called remove event on model"]
  ["called remomve on collection"]
  </code></pre>
  
  <p>if I delete the remove function from the RosterEntry model I get this error:</p>
  
  <pre><code>TypeError: this.$el is undefined
  this.$el.remove();
  </code></pre>
  
  <p>What am I doing wrong? How do I remove the element from the DOM when it is removed from the collection?</p>