title: Backbone.js: Should .render() and .remove() be able to reverse each other?
body: <p>Because Backbone.js is pretty flexible, I am wondering about the best approach for certain things. Here I'm wondering if I'm supposed to build my application's views so that '.render()' and '.remove()' correctly reverse each other.</p>
  
  <p>At first, the way that seems cleanest is to pass the view a ID or jQuery element to attach to. If things are done this way though, calling '.render()' will not correctly replace the view in the DOM, since the main element is never put back in the DOM:</p>
  
  <pre><code>App.ChromeView = Backbone.View.extend({
    render: function() {
      // Instantiate some "sub" views to handle the responsibilities of
      // their respective elements.
      this.sidebar = new App.SidebarView({ el: this.$(".sidebar") });
      this.menu = new App.NavigationView({ el: this.$("nav") });
    }
  });
  
  $(function() {
    App.chrome = new App.ChromeView({ el: $("#chrome") });
  });
  </code></pre>
  
  <p>It seems preferable to me to set it up so that .remove() and .render() are exact opposites:</p>
  
  <pre><code>App.ChromeView = Backbone.View.extend({
    render: function() {
      this.$el.appendTo('body');
      this.sidebar = new App.SidebarView({ el: this.$(".sidebar") });
      this.menu = new App.NavigationView({ el: this.$("nav") });
    }
  });
  
  $(function() {
    App.chrome = new App.ChromeView();
  });
  </code></pre>
  
  <p>What does the Backbone.js community say? Should .remove() and .render() be opposite sides of the same coin?</p>