Удаление элемента из droppable

[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();

})	
}

});
})

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

[ОлегА]

$('.delete').fadeIn(100);//показываем крестик при наведении

- здесь вы выбираете все элементы с классом delete поэтому они все у вас отображаются и все скрываются вот тут -

$('.delete').fadeOut(2000);

покажите хтмл как это вообще выглядеть должно

[dmivasant]

Вот он

<div id="wraper">
  <div id="heder">
	
    
  </div>
  <div id="saitbar" class="ui-widget-content">
  	
    <div id="left">
    
      <div id="accordion">
        <h3>Картинки</h3>
        <div class="dropp">
       	  
          <div id="element1" class="img"><div class="delete"></div><img src="images/1.png" width="259" height="38" /></div>
          <div id="element2" class="img"><div class="delete"></div><img src="images/2.png" width="255" height="146" /></div>
          <div id="element3" class="img"><div class="delete"></div><img src="images/3.png" width="255" height="40" /></div>
          </div>
      </div>
    </div>
    
  </div>
  <div id="razmerHolsta">
    	Ширина: <input id="div_w" type="text">
		Высота: <input id="div_h" type="text">
		<input id="set_size" type="button" value="Установить">
		
  	<div id="my_div"></div>
  </div>	
  <div id="content">
  	<div id="contener" class="ui-widget-content">
    	
    </div>
    
  </div>
</div>

[ОлегА]

возможно так

$(".newElement > img").hover (function(){
             
            $(this).parent().find('.delete').fadeIn(100);//показываем крестик при наведении
            },function(){
                $(this).parent().find('.delete').fadeOut(2000);
                });
                //удаляем то что попала в контенер
            $('div[id*=element]').on('click','.delete', function(){ $(this).remove(); });

[dmivasant]

спасибо, теперь при наведении показывыються не все крестики , но удаляються только крестики
Что делать?

[ОлегА]

а я тут ошибся,

$('div[id*=element]').on('click','.delete', function(){ $(this).parent().remove(); });

[dmivasant]

Спосибо вам большое что помогли. Все работает