Remove item from view when removed from collection

Question

I'm using Backbone.js. I am listen to the "add" event of my collection

this.listenTo(this.collection, "add", this.addOne);

and it will append the view object like this:

addOne: function (as) {
        var v = new XUView({model: as}).render();
        $(v.el).prependTo($('#object-list')).hide().fadeIn().slideDown();
}

Now I want to automatically remove objects from the view if the item has been deleted from the collection. I am listening on the "remove" event:

this.listenTo(this.collection, "remove", this.removeOne);

And I tried several things for the remove function, but none of them did the job. The removeOne function is triggered correctly, but as I said, without effect. How can I remove the view object from my frontend?

I already tried:

XUView.remove(XUView.where(as));

XUView.remove(as);

this.collection.remove(as);

this.collection.remove(this.collection.where(as));

Answer 1

You have to keep a mapping table between your collection and the model views. When the remove event is trigger based on that mapping table you know which element from DOM should be removed or which is the view.

in addOne function you could setp the view on your model

addOne: function (as) {
        var v = new XUView({model: as});
        v.render();
        as.view = v;
        $(v.el).prependTo($('#object-list')).hide().fadeIn().slideDown();
}

and in remove function

removeOne:function(model){
  model.view.remove();
}