JQuery append and bind
<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>

<p><hr /></p>

<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>
