Клонированный элемент не может быть удален

Question

У меня есть сетка, где, если пользователь наводил курсор на коробку, клон этого окна создается и позиционируется непосредственно над ним (это элемент z-index/overlay). Когда пользователь покидает эту ячейку с помощью курсора, предполагается, что анимация будет воспроизводиться, а в конце ее будет удален().

Проблема в том, что анимация завершена, но клон не удаляется. Я использую console.logs и предупреждения, чтобы сообщить мне, завершена ли анимация, и она предупреждает о прекращении, но что-либо, что нужно сделать для этого клонированного клиента после завершения анимации, не проходит. Вот пример:

clonedClient.slideUp(300, function(){ 
     alert('ya'); 
     clonedClient.remove(); 
}); 

После того, как слайд-эффект завершен, срабатывает предупреждение, но удалить нет.

Вот jsfiddle, так что вы можете увидеть, что происходит

http://jsfiddle.net/Q6fVP/1/

Answer 1

Событие MouseEnter срабатывает дважды (потому что клон selected-client также имеет класс client. Если вы добавите console.log в событие mouseenter, вы заметите:

entering <div class=​"client">​hello​</div>​ 
entering <div class=​"client selected-client" style=​"background-color:​ red;​ position:​ absolute;​ top:​ 0.5em;​ background-position:​ initial initial;​ background-repeat:​ initial initial;​">​hello​</div>​ 

Вы хотите, чтобы пропустить событие MouseEnter если элемент, что в настоящее время срабатывает на ваш selected-client.

т.е. в первый обработчик события:

if($this.hasClass('selected-client')){return;}

или, более полно, для этого блока кода:

$(document).on({ 
    mouseenter: function(){ 
     var $this = $(this); 
     if($this.hasClass('selected-client')){ 
      return; 
     } 
     var clientClone = $this.clone().css({background:'red', position:'absolute', top: '0.5em'}).addClass('selected-client'); 
     clientClone.insertBefore(this); 
    } 
}, 'div.client'); 

Answer 2

Если я правильно понимаю, что я думаю, что вы хотите заменить clonedClient.remove();

с $('.selected-client').remove();

Answer 3

Вы используете $(document).on(), что означает, что обработчик событий прилагается задокументировать. Когда вы клонировали свой элемент <div>, к клону был применен класс .client. И когда вы вставили клон после оригинала, mouseenter был снова запущен, потому что вы ввели вновь клонированный элемент (здесь был сделан другой клон).

Моим решением является удаление класса .client из клона перед вставкой.

http://jsfiddle.net/Q6fVP/8/