title: jQuery - Formbuilder : remove an appended <li> on click
body: <p>I've wrote the code bellow in order to add a new <code>&lt;li&gt;</code> embedded form using jQuery on click event on an input button. This actualy works for a Symfony2 Formbuilder view.</p>
  
  <p>Now I need to write the reverse function to delete a <code>&lt;li&gt;</code>. I've tried a simple <code>.remove()</code> on the <code>&lt;li&gt;</code> id, but it doesn't work. It seems to be a bit more complicated than this.</p>
  
  <pre><code> $(function(){
       var index = 0;
       var prototype = $('ul.answers').data('prototype');
       $('#addmore').on('click', function(){
              var newForm = prototype.replace(/__name__/g, index++);
              var newLi = $('&lt;fieldset&gt;&lt;legend&gt;Answer '+index+' :&lt;/legend&gt;&lt;li id="answer'+index+'"&gt;&lt;/li&gt;\n\
  &lt;input id="removeone" type="button" value="Delete this answer"&gt;&lt;/fieldset&gt;');
  
          newLi.append(newForm);
          $(this).before(newLi);
       });
  
       $('#removeone').on('click', function(){
              $( "#answer"+index).remove;            
       });
  
   });
  
   &lt;ul class="answers" data-prototype="{{ form_widget(form.answers.vars.prototype)|e }}"&gt;
      {% for answer in form.answers %}
          &lt;li style="display:none;"&gt;{{ form_row(answer.answer) }}
          {{ form_row(answer.feedback) }}
          &lt;/li&gt;
      {% endfor %}        
   &lt;/ul&gt;
   &lt;input id="addmore" type="button" value="Add an answer"&gt;
  </code></pre>