Javascript 克隆的元素可以'；不能删除

我有一个网格，如果用户将鼠标悬停在一个框上，就会制作一个该框的克隆，并直接定位在它上面（这是一个z索引/覆盖的东西）。当用户用光标离开该框时，将播放动画，并在动画结束时移除该框（）

问题是动画已完成，但克隆尚未删除。我使用console.logs和alerts来告诉我动画是否完成，它会发出良好的警报，但动画完成后要对克隆客户端执行的任何操作都不会通过。下面是一个例子：

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

在slideUp完成后，会触发警报，但不会触发删除

这里有一个jsfiddle，您可以看到发生了什么

---

如果我理解正确，我认为您希望替换

clonedClient.remove（）

使用
$（'.selected client'）.remove（）
鼠标指针事件会触发两次（因为
选定的客户端
克隆也有一个
客户端
类。如果在鼠标指针事件中添加console.log，您会注意到：

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>​

您正在使用
$（document）.on（）
，这意味着事件处理程序已附加到文档。克隆
元素时，类
.client
也应用于克隆。当您在原始元素之后插入克隆时，由于您输入了新克隆的元素，因此再次触发了
mouseenter
（这里又复制了一个）

我的解决方案是在插入之前从克隆中删除
.client
类

正在调用
删除
。只是DOM中有多个克隆。它正在删除其中一个克隆，但其他克隆仍然存在，并在
鼠标上继续添加。是否可以添加
：not（'selected-client'）
到原始选择器？我会删除.client，但它也绑定到css样式
$(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');