hola, tengo un problema con la eliminacion de un clon, solo me elimina el original mas no su clon alguien podria ayudarme a saber pk o que esta equivocado??



<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />

<title></title>
<meta name="description" content="ahmsa" />


<!-- import necessary libraries -->
<script src="http://www.google.com/jsapi" type="text/javascript">
</script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.3");
</script>
<!-- Include stylesheets -->
<link rel="stylesheet" type="text/css" href="stylesheets/style.css" media="all" />

<script type="text/javascript">
$(document).ready(function(){
//Counter
counter = 0;
//Make element draggable
$(".drag").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) {
if (ui.helper.attr('id').search(/drag[0-9]/) != -1){
counter++;
var element=$(ui.draggable).clone();
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)

$("#clonediv"+counter).addClass(itemDragged);
}
}
});
$(".drag .eliminar").click(function(){
$(this).prev().parents(".drag").animate({ opacity: 'hide' }, "slow");


});

$("#trash").droppable({
accept: ".drag",
drop: function( event, ui ) {
$(ui.draggable).remove();
}
});
});

</script>



</head>

<body>

<div id="wrapper">
<div id="options">
<div style="height:550px;width:200px;overflow:scroll;">
<div id="drag1" class="drag"><img src="images/a1.png" /></div>
<div id="drag2" class="drag"><img src="images/a1.png" /><span class="eliminar" alt="cerrar"><img src="images/close.gif"/></span></div>
<div id="drag3" class="drag"><img src="images/a1.png" /></div>
<div id="drag4" class="drag"><img src="images/a1.png" /></div>
<div id="drag5" class="drag"><img src="images/a1.png" /></div>
<div id="drag6" class="drag"><img src="images/a1.png" /></div>
</div>
</div>
<div id="frame">
<span id="title">
<h2>&nbsp;</h2></span></div><!-- end of frame -->
</div><!-- end of wrapper -->

<div id="trash"><h3>Trash Bin</h3></div>
</body>
</html>