How to Delete / Remove cloned image from dropped region using jquery?

Question

Hi, After dragging the cloned image ,suppose i want to delete it , how to delete a cloned image from the dropping region? . I am doing clone,drag/drop and resizing the images by using below code .I know its not the right way,but i am new to jQuery. In addition i want to rotate the cloned image also.

$(document).ready(function() {

  $('img').resizable();
  });

  $(document).ready(function() {
      //Counter
      counter = 0;

      //Make element draggable
      $("img").draggable({
          helper: 'clone',
          containment: '#frame',

          //When first dragged
          stop: function(ev, ui) {
              var pos = $(ui.helper).offset();
              objName = "#clonediv" + counter
              $(objName).css({ "left": pos.left, "top": pos.top });

              $(objName).removeClass("drag");
              //When an existiung object is dragged
              $(objName).draggable({
                  containment: 'parent',
                  stop: function(ev, ui) {
                      var pos = $(ui.helper).offset();
                      //console.log($(this).attr("id"));
                      //console.log(pos.left)
                      //console.log(pos.top)


                  }
              });
          }
      });

      //Make element droppable
      $("#frame").droppable({

          drop: function(ev, ui) {
              debugger
              if (ui.helper.attr('id').search(/drag[0-9]/) != -1) {
                  var pos = $(ui.helper).offset();

                  counter++;
                  var element = $(ui.helper).clone();
                  //var element = element1.resizable();
                  element.addClass("tempclass");

                  $(this).append(element);
                  $(".tempclass").attr("id", "clonediv" + counter);

                  $("#clonediv" + counter).removeClass("tempclass");

                  //Get the dynamically item id
                  draggedNumber = ui.helper.attr('id').search(/drag([0-9])/)
                  itemDragged = "dragged" + RegExp.$1
                  //console.log(itemDragged)
                  //alert('left' + pos.left + ',top' + pos.top + 'of item' + itemDragged);
                  $("#clonediv" + counter).addClass(itemDragged);
              }
          }
      });
      //Make the element resizable


  });   



      I am able to hide and resize the dragged elements ,but the problem is i am not able to drag them after dropping.In addition to delete the object i am using hide(),but that is not removing the resize handle,to achieve that what is the best way ?

Below is the code i am using

 $(function() {
  $('#frame img').live('mousemove', function(event){  
      $('#frame img').resizable(); 
  });
  });
$(function(){ 
   $('#frame img').live('dblclick', function(event){  
    $(this).hide();   
    //$(this).unbind("resizable"); not working
    //$(this).removeclass(); not working
 });});​ 

Thanks in advance