title: How to delete dynamically added item from sortable list?
body: <p>I've created a jquery sortable list where each item has a "delete" button to the right.  When you click the delete button, that item is deleted.  I found this from another question on here ( <a href="https://stackoverflow.com/questions/8806058/delete-jquery-ui-sortable-list-item">Delete Jquery-ui sortable list item</a> ).  I need to allow the user to add items to the list, so I've created an Add button.  The adding works fine, however, the newly added items cannot be deleted using the delete button.  Here's the jfiddle:  <a href="http://jsfiddle.net/g33ky/fadAn/1/" rel="nofollow noreferrer">http://jsfiddle.net/g33ky/fadAn/1/</a></p>
  
  <p>Code is below:</p>
  
  <pre><code>&lt;script&gt;
  $("#fruitList").sortable();
  
  $("#fruitList .delete").click(function () {
    $(this).parent().remove();
  });
  
  $("#addFruit").click(function () {
    $('#fruitList').append("&lt;li class='fruit'&gt;New fruit&lt;button class='delete'&gt;Delete&lt;/button&gt;&lt;/li&gt;");
  });
  &lt;/script&gt;
  
  &lt;html&gt;
  &lt;button id='addFruit'&gt;Add fruit&lt;/button&gt;
  &lt;ul id="fruitList"&gt;
      &lt;li class="fruit"&gt;Apple
          &lt;button class="delete"&gt;Delete&lt;/button&gt;
      &lt;/li&gt;
      &lt;li class="fruit"&gt;Banana
          &lt;button class="delete"&gt;Delete&lt;/button&gt;
      &lt;/li&gt;
      &lt;li class="fruit"&gt;Orange
          &lt;button class="delete"&gt;Delete&lt;/button&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Click on "Add Fruit", then try deleting the new fruit, and you'll see that the delete on "New Fruit" doesn't work.  I've googled and searched on here, but so far no luck.  Any help would be greatly appreciated.</p>