[dmivasant]

Здравствуйте, кто знает как после того как элемент попал droppable его удалить. В идеале наведя на элемент курсор мыши в правом углу всплывает крестик, нажав на него элемент удаляется совсем?

Вот такой код получаеться, но работает не правильно. Он удаляет весь контенер который принемает элементы и при наведении на элемент крестики всплываьт у всех элементов.

$(document).ready(function() { 
//элементы стают перетаскиваемые

	$('div[id*=element]').draggable({ 
	containment: "#wraper",
	revert: "invalid", 
	grid: [ 20,20 ],
	opacity: 0.5,
	scroll:false,
	zIndex: 35,
	appendTo: "body",
	helper: "clone",
	cursor: "move",
	stack:"div[id*=element] > img"
	}).find('img').css({
                        'width' : '50%',
                        'height' : '50%'
                    });

//прячем крестик

$('.delete').hide();


//приемник 

	 $( "#contener" ).droppable({
		  accept: " #accordion > .dropp > div[id*=element]",
		  activeClass: "ui-state-highlight",
		drop: function( event, ui ) {
			var element = $(ui.draggable);
			element.fadeIn(1000, function() {
                    $(this).clone()
					.addClass("newElement") 
					.appendTo("#contener" )
            		.draggable({containment: "body", opacity: 0.5, stack:".img"})//делаем опять перетаскиваемым
					.resizable({containment: "#contener", aspectRatio:true})//дераем чтоб менялся в размере
					.find('img').animate({
                        'width' : '100%',
                        'height' : '100%'
                    },100)
					
			});
		$(".newElement").prepend($(".delete"));	//добовляем крестик элементу который попал в контенер
		$(".newElement > img").hover (function(){
			
			$('.delete').fadeIn(100);//показываем крестик при наведении
			},function(){
				$('.delete').fadeOut(2000);
				});
				//удаляем то что попала в контенер
			$('div[id*=element]').on('click','.delete', function(){$('.newElement').parent().remove();

})	
}

});
})

Что нужно исправить, кто знает?