Javascript 从集合视图中删除模型后动态更新集合视图

我有以下代码：

// Create the Backbone view to display a list of vehicles

var Vehicle = Backbone.Model.extend({
  idAttribute: "registrationNumber",
  urlRoot: "/api/vehicles",
  validate: function(attrs) {
    if (!attrs.registrationNumber)
        return "Registration number is required!";
  }
});

var Vehicles = Backbone.Collection.extend({
  model: Vehicle
});

// View for the model
var VehicleView = Backbone.View.extend({
  tagname: "li",
  attributes: {
    "data-color" : "Rainbow"
  },
  events: {
    "click .deleteButton" : "deleteVehicle"
  },

  render: function() {
    var template = _.template($("#vehicleTemplate").html());
    var html = template(this.model.toJSON()); 
    this.$el.html(html);
    return this;
  },

  deleteVehicle: function() {
    console.log("Model destroyed");
    this.model.destroy();
  }
});

var VehiclesView = Backbone.View.extend({
  tagName : "ul",

  initialize: function () {
    this.model.on("change", this.render, this);
    this.model.on("add", this.render, this);
    this.model.on("remove", this.render, this);
  },

render: function() {
    var self = this;

    this.model.each(function(vehicle){ 
        var vehicleView = new VehicleView({model: vehicle}); 
        self.$el.append(vehicleView.render().$el); 
    });
}

});

// Add cars to the collection
var car1 = new Vehicle({registrationNumber: "XLI887", color: "blue"});
var car2 = new Vehicle({registrationNumber: "ZNP123", color: "blue"});
var car3 = new Vehicle({registrationNumber: "XUV456", color: "grey"});

var vehicles = new Vehicles([car1, car2, car3]);

var vehiclesView = new VehiclesView({el: "#container", model: vehicles});
vehiclesView.render();

渲染看起来不错，但单击“删除”时，新集合（少了一个元素）将附加到旧集合的现有视图中。如何用新的集合视图替换旧的集合视图？

我修改了“remove”处理程序，如下所示，它从列表中动态删除了“li”元素，并显示了新的集合

initialize: function () {
    this.model.on("change", this.render, this);
    this.model.on("add", this.render, this);
    this.model.on("remove", this.onDelete, this);
},

onDelete : function(vehicle) {
    console.log("Vehicle deleted");
    this.$el.find("li#" + vehicle.id).remove();
}