title: BackboneJS Add and remove class to clicked element
body: <p>I have this Backbone App where I fetch a JSON file, which displays the alphabetletters, when clicking on one of those letters, it will display the relevant Artists starting with that letter. It works so far but what I want to achieve is to add some kind of <code>active</code>-class to the clicked letter. How can i achieve this?</p>
  
  <p>My View looks like this:</p>
  
  <pre><code>function (App, Backbone) {
  
      var Alphabet = App.module();
      var LetterView = Backbone.View.extend({
          template: 'alphabetlist',
          tagName: 'li',  
          serialize: function() {
              return this.model.toJSON();
          },  
  
      });
  
      Alphabet.View = Backbone.View.extend({
          tagName: 'ol',
          className: 'alist',
          initialize: function() {
              this.listenTo(this.collection, 'all', this.render);
              this.listenTo(this.collection, 'sync', this.onSync);
  
              this.collection.fetch();
          }, 
          beforeRender: function() {
              var self = this;
  
              this.collection.each(function(item) {
                  self.insertView(new LetterView({model: item}))
              })
          },
      });
      Alphabet.AlphabetCollection = Backbone.Collection.extend({
          url: 'js/json/AlphabetCollection.json'
      });
  
      return Alphabet;
  }
  </code></pre>
  
  <p>So can anyone help me out? Thanks in advance...</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>When I do:</p>
  
  <pre><code>    events: {
          'click a' : 'toggle'
      },
  
      serialize: function() {
          return this.model.toJSON();
      },
  
      toggle: function(event) {
          this.$el.parent().addClass('test');
      },
  </code></pre>
  
  <p>the <code>&lt;ol&gt;</code>-element gets the class, but still not targetting the <code>&lt;li&gt;</code>-element...</p>