title: Remove corresponding item when delete button is clicked. BackboneJs
body: <p>I am currently learning BackboneJs and trying to understand how Backbone handles events. I have a simple list of items and each item has a <code>delete</code> button right next to it. I'm trying to figure out why the click event(Delete button) is registered in the console but the item is not removed. Here's what I have:</p>
  
  <pre><code>var Vehicle = Backbone.Model.extend();
  var Vehicles = Backbone.Collection.extend({
      model: Vehicle
  });
  
  
  /*************
  single view
  **************/
  var VehicleView = Backbone.View.extend({
      tagName: 'li',
      className: 'vehicle',
      render: function() {
          this.$el.html(this.model.get("title") + " Registration Number is: " + this.model.get("regiNum") + " &lt;button class='delete-btn'&gt;Delete&lt;/button&gt;");
          this.$el.attr("id", this.model.id);
          return this;
      }
  });
  
  /*************
  Collection View
  *************/
  var VehiclesView = Backbone.View.extend({
      tagName: "ul",
      initialize: function() {
          this.model.on('remove', this.vehicleRemove, this);
      },
      events: {
          "click .delete-btn": "vehicleRemove"
      },
      vehicleRemove: function(vehicle) {
          this.$("li#" + vehicle.id).remove()  // this is not working. the item is not being removed
          console.log('Delete button clicked')    // this is registered in the console log
      },
  
      render: function() {
          var self = this;
          this.model.each(function(vehicle) {
              var vehicleView = new VehicleView({
                  model: vehicle
              });
              self.$el.append(vehicleView.render().$el);
          })
      }
  });
  
  
  var vehicles = new Vehicles([
      new Vehicle({
          id: 1,
          title: "Toyota",
          regiNum: "453454624"
      }),
      new Vehicle({
          id: 2,
          title: "Honda",
          regiNum: "daf4526"
      }),
      new Vehicle({
          id: 3,
          title: "Audi",
          regiNum: "jlkjfa34"
      })
  ])
  
  var vehiclesView = new VehiclesView({
      el: "#container",
      model: vehicles
  });
  vehiclesView.render();
  </code></pre>
  
  <p>Please help me out or point me to the right direction would be greatly appreciated.</p>