title: Bootstrap accordion remove panel on button click
body: <p>I am using Bootstrap accordion which is dynamically created based on select options from a select list option so for each option selected, I append an accordion panel to the existing accordion.</p>
  
  <p>As well as being able to add panel, I want to be able to remove a panel.  I did think about having a close button but I'm unable to target the click event on the close button (span).</p>
  
  <p>Here is a sample of what is output when I create the accordion</p>
  
  <pre><code>&lt;div id="menu"&gt;
      &lt;div class="panel list-group"&gt;
          &lt;a href="#" class="list-group-item default" data-toggle="collapse" data-target="#sm" data-parent="#menu"&gt;MESSAGES &lt;span class="label label-info"&gt;5&lt;/span&gt; &lt;span class="fa fa-close pull-right"&gt;&lt;/span&gt;&lt;/a&gt;
          &lt;div id="sm" class="sublinks collapse"&gt;
              &lt;div class="list-group-item"&gt;
                  TEST1
              &lt;/div&gt;
              &lt;div class="list-group-item"&gt;
                  TEST2
              &lt;/div&gt;
              &lt;div class="list-group-item"&gt;
                  TEST3
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I thought clicking this element <code>&lt;span class="fa fa-close pull-right"&gt;</code> would cause an event to fire but it never does. It just opens/closes the panel as the default behaviour.</p>
  
  <p>I did think about trying to use Jquery to deal with the accordion but that seems like a lot of extra effort.</p>
  
  <p>Do i need to put my close button somewhere else or am I missing anything that can get this to work?</p>