JQuery append and bind

Question

I have an unordered list with items, and I want to add an item at the end. Here is the current code:

Source List:

<ul id="all">
  <li>
    Some text <input type="button" class="remove" value="-" />
  </li>
  <li>
    Some text <input type="button" class="remove" value="-" />
  </li>
</ul>

Code removing list item:

$(".remove").click(function() {
  $(this).parent().remove();
});

Code that adds a new list item:

$("#add").click(function() {
  $("#all").append(
    "<li>"
    + "Some text"
    + "<input type=\"button\" class=\"remove\" value=\"-\" />"
    + "</li>"
  );
});

Button for adding a new list item:

<input type="button" id="add" value="Add" />

When I click the button, a new list is added to the list, but pressing the delete button does nothing.

How do I do this job?

---

Bonus: change "Some text" to " <input type="text" /> <input type="text" />" and you will see that the two newly added input elements will have different distances between them from the initial ones. What for? (NOTE: using Firefox 3.0.5).

Answer 1

, - jQuery 1.3 - . . http://docs.jquery.com/Events/live.

:

$(".remove").live("click", function() {
  $(this).parent().remove();
});

Bonus:

FF 3.0.5, . , eimaj , .

Answer 2

#add node (DOM), .remove "" ( ). live .

(: / - : , "Some text" Ff3.0.5)