title: JQuery append and bind
body: <p>I have an unordered list with elements and I want to append an item at the end. Here is the current code:</p>
  
  <p>The initial list:</p>
  
  <pre><code>&lt;ul id="all"&gt;
    &lt;li&gt;
      Some text &lt;input type="button" class="remove" value="-" /&gt;
    &lt;/li&gt;
    &lt;li&gt;
      Some text &lt;input type="button" class="remove" value="-" /&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The code that removes a list item:</p>
  
  <pre><code>$(".remove").click(function() {
    $(this).parent().remove();
  });
  </code></pre>
  
  <p>The code that adds a new list item:</p>
  
  <pre><code>$("#add").click(function() {
    $("#all").append(
      "&lt;li&gt;"
      + "Some text"
      + "&lt;input type=\"button\" class=\"remove\" value=\"-\" /&gt;"
      + "&lt;/li&gt;"
    );
  });
  </code></pre>
  
  <p>The button to add a new list item:</p>
  
  <pre><code>&lt;input type="button" id="add" value="Add" /&gt;
  </code></pre>
  
  <p>When I click the button, a new list indeed is added to the list, but clicking the remove button doesn't do anything. </p>
  
  <p>How do I make this work?</p>
  
  <hr>
  
  <p>Bonus: Change "Some text" with "<code>&lt;input type="text" /&gt; &lt;input type="text" /&gt;</code>" and you will see that the two newly added input elements will have different distance between them from the initial ones. Why? (NOTE: using Firefox 3.0.5).</p>