title: JQuery UI .sortable button to remove from current list and return to original list
body: <p>I want to append a button on moved items that when clicked will remove the item from the list and return it to its original position. <a href="http://quasipartikel.at/multiselect/" rel="nofollow">This plugin</a> has the functionality I'm looking for but I've been searching all day and it looks like this is missing from .sortable.</p>
  
  <p>What I have as a structure is:</p>
  
  <pre><code>&lt;ul class="sortable"&gt;
    &lt;li class="parent old"&gt;
      &lt;h3 class="heading"&gt;User 1&lt;/h3&gt;
      &lt;a class="remove"&gt;X&lt;/a&gt;
      &lt;ul class="sortable"&gt;
        &lt;li class="ui-state-default old"&gt;
          &lt;h3&gt;My Image&lt;/h3&gt;
        &lt;/li&gt;
        &lt;li class="ui-state-default old"&gt;
          &lt;h3&gt;My Image 2&lt;/h3&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Here's the js:</p>
  
  <pre><code>$('.sortable').sortable({
      connectWith: [".newList"],
      handle: "h3",
      cursor: "move",
      placeholder: "placeHolder",
      opacity: 0.5,
      items: ".old",
      clone: "helper",
      revert: true
  });
  $('.remove').click(function(){
      $(this).prevAll('.parent:first').remove();
  });
  </code></pre>
  
  <p>Experimenting with different things I can successfully envoke the .sortable("destroy") but that will do no good if it won't appear in the original list again. There is another possible (not ideal) solution that I've been looking at <a href="http://jsfiddle.net/B5PH4/" rel="nofollow">here in this fiddle</a>. Basically my thoughts on this solution is adding a destroy to the button and it is always in the original list. The problem here is that I really do need to at least hide this from the original and show it if the corresponding item is destroyed from the new list. So ideally I would like to do this with .sortable if possible.</p>