title: Backbone add remove from UL anomaly
body: <p>Iam developing a simple application to add and remove names from a ul. I have a input and a button , when i click button , text in input is appended to ul.My code is : </p>
  
  <pre><code>&lt;input type="text" placeholder="Enter friend's name" id="input" /&gt;
  &lt;button id="add-input"&gt;Add Friend&lt;/button&gt;
  
  &lt;ul id="friends-list"&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Backbone Code :</p>
  
  <pre><code>&lt;script&gt;
      $(function() {
  
          FriendList = Backbone.Collection.extend({
              initialize: function(){
  
                  this.bind("add", function( model,options ){
                      var id = ( model.collection.indexOf(model) );
                      view.render(model,id);
                  });
                  this.bind("remove",function(model){
                      alert("here");
                  });
  
              }
          });
  
          FriendView = Backbone.View.extend({
  
              tagName: 'li',
  
              events: {
                  'click #add-input':  'getFriend',
                  'click .button': 'removeFriend'
              },
  
              initialize: function() {
                  this.friendslist = new FriendList;
                  _.bindAll(this, 'render');
              },
  
              getFriend: function() {
                  var friend_name = $('#input').val();
                  this.friendslist.add( {name: friend_name} );
  
              },
  
              removeFriend: function(){
                  var friend_index = $('.button').attr('id');
                  alert(friend_index);
  
                  this.friendslist.remove();
              },
  
              render: function( model,id ) {
                  $("#friends-list").append("&lt;li&gt;"+ model.get("name")+"&lt;button class=button id="+id+"&gt;"+"delete"+"&lt;/button&gt;"+"&lt;/li&gt;");
  
                  $('#input').val('');
  
              }
  
          });
  
          var view = new FriendView({el: 'body'});
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>My problems , where iam stuck :</p>
  
  <p>i) Add functionality is running just fine , when i click delete button , it goes to removeFriend function but does not goto the collection and alert ("here");
  ii) Please Help me write code for deleting/removing an li on clicking delete button</p>
  
  <p>Thank you</p>