removing clone and deleting draggable in jQuery's drag and drop

Question

I am still rather new to jQuery and had a question. I am trying to implement a "drag and drop" method where the user can drag items in one list and drop them in "buckets" in another. I seem to have the dragging part down but two things are causing me errors. First, I cant seem to remove the "clone" that gets dragged and second I cant remove the original item from the "Draggable" list. Bellow is my code (after it's been rendered in ASP.Net".

I am using the following jQuery Libraries:

1. 1.4.2/jquery.js,jquery.ui.core.js
2. jquery.ui.widget.js
3. jquery.ui.mouse.js
4. jquery.ui.draggable.js
5. jquery.ui.droppable.js.

JScript:

    $(function () {
        $(".draggable1").draggable({
            helper:'clone',
            scroll: false,
            revert: "invalid",
            appendTo: '#PopupBody',             
            drag: function(event,ui){              
            }               

        });

        $(".droppable1").droppable({   

            activeClass: "ui-state-hover",
            hoverClass: "ui-state-active",
            drop: function (event, ui) {
                var drag_id = $(ui.draggable).attr("id");
                var targetElem = $(this).attr("id");
                deleteMe = true;            
              $(this)
            .addClass("ui-state-highlight")
            .find("p")
            .html("Dropped! inside " + targetElem);
              //destroy clone
             //remove from list


            }
        });
    });

HTML:

<table style="width:100%; height:100%; position:relative; border:1px solid blue;">
   <tr>
     <td style="height:100%">
        <div id="divWrapper" style="position:relative; border:1px solid green; overflow:auto;  width:15em; height:80%;">
           <table id="testDlg1_dlUsers" cellspacing="0" style="border-collapse:collapse;">
              <tr>
                 <td style="color:#8C4510;background-color:#FFF7E7;">
                    <div id="divWrapperItem"  class="draggable1 ui-widget-content" style="border:1px solid black;">
                       <table>
                         <tr>
                            <td>
                               <span id="testDlg1_dlUsers_DOBLabel_0">Hello</span>
                            </td>
                         </tr>
                       </table>
                   </div>
                </td>
             </tr>
          </table> 
      </div>
   </td>
   <td style="height:100%">
        <div style="position:relative; border:1px solid green; width:15em; height:80%;">
            <table id="testDlg1_dlGroups" cellspacing="0" style="border-collapse:collapse;">
               <tr>
                 <td style="color:#8C4510;background-color:#FFF7E7;">
                    <div id="testDlg1_dlGroups_droppable1_0" class="droppable1 ui-widget-header" style="border:1px solid black; padding-left:20px;">
                       <table>
                          <tr>
                             <td>
                                <span id="testDlg1_dlGroups_DOBLabel_0">Trash</span>
                             </td>
                         </tr>
                       </table>
                     </div>
                 </td>
             </tr>
          </table> 

Answer 1

Can you try this

$(".droppable1").droppable({   
            activeClass: "ui-state-hover",
            hoverClass: "ui-state-active",
            drop: function (event, ui) {
                var drag_id = $(ui.draggable).attr("id");
                var targetElem = $(this).attr("id");
                deleteMe = true;            
                $(this)
                  .addClass("ui-state-highlight")
                  .find("p")
                  .html("Dropped! inside " + targetElem);

                $(ui.helper).remove(); //destroy clone
                $(ui.draggable).remove(); //remove from list    
            }
        });

You can access the currently dragged element and its clone using the ui object declared on your drop method.