title: In jQuery UI how to add the ui close button to a draggable?
body: <p>This is working using .sortable:</p>
  
  <pre><code>if ($(ui.item).find('.removeButton').length == 0){
      var removeButton = $('&lt;span class="removeButton"&gt;X&lt;/span&gt;').click(function(){
          $(this).remove();
          $(this).each(function(){
              $(this).appendTo($(this).attr('parentClass'));
          });
      });
      $(ui.item).append(removeButton);
  };
  </code></pre>
  
  <p>But I can't get it to work on .draggable at all. I can no longer use .sortable as the programmer made the entire thing using .draggable instead so I have to convert it some how. It seems like a pretty straightforward bit of code so I don't know why it isn't working.</p>
  
  <p>The HTML is similar to a sortable with two areas, drag one side to the other.</p>
  
  <pre><code>&lt;div id="source"&gt;
      &lt;div id="su1"&gt;
        &lt;h3&gt;&lt;/h3&gt;
        &lt;ul&gt;&lt;/ul&gt;
      &lt;/div&gt;
      ....
  &lt;/div&gt;
  &lt;div id="destination"&gt;
      &lt;div id="su1"&gt;
        &lt;h3&gt;&lt;/h3&gt;
        &lt;ul&gt;&lt;/ul&gt;
      &lt;/div&gt;
      ....
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/rvAgL/2/" rel="nofollow">The working .sortable.</a></p>