title: jQuery click event not working for p tag class
body: <p>I am generating an output of options selected from drop down list.
  I want to allow the user to 'remove' selections from the output.</p>
  
  <p>I can't get my code to work though, here is the code which renders the output:</p>
  
  <pre><code> $('#dataCombo').change(function(){
   $('#dataOutput').html('');
   var values = $('#dataCombo').val();
   for(var i = 0; i &lt; values.length; i += 1) {
   $('#dataOutput').append(values[i] + '&lt;p class="removeable"&gt;X&lt;/p&gt;'+'&lt;br/&gt;')
   }});
  </code></pre>
  
  <p>So the selected drop down item is displayed on the page with a 'X' next to it in P tags with the class "removable", generated.  I've inspected this in chrome and the p tag is created with the correct class.</p>
  
  <p>I added this code to remove the clicked option however it doesnt work:</p>
  
  <pre><code>$('.removeable').click(function(){
  $('.removeable').remove();
  console.log("I did this"); 
  });
  </code></pre>
  
  <p>The item doesn't get removed, i don't get a log in the console.  Any idea why this wouldnt work?  </p>
  
  <p>EDIT:</p>
  
  <p>I've amended my code to this:</p>
  
  <pre><code>$('#dataOutput').append('&lt;p class="removeable"&gt;' + values[i] + 'X&lt;/p&gt;'+'&lt;br/&gt;')
  </code></pre>
  
  <p>And it does indeed remove the item, however the option is still 'selected' in the drop down box.  I was trying to get it to 'unselect' this as well.  I'm using Bootstrap and a drop down with 'multiple' activated.  While the option is currently removed from the output, it's not removed from the select box (meaning when another option is clicked it re-renders the previously removed element).</p>
  
  <p>I've asked the question (hopefully) more clearly, in a different way to the duplicated question:
  <a href="https://stackoverflow.com/questions/22606542/unselect-an-option-using-jquery-on-a-bootstrap-selectpicker">Unselect an option using jQuery on a Bootstrap selectpicker</a></p>