克隆的元素不能被删除

我有一个网格，如果用户悬停在一个盒子上，该盒子的克隆被制作并直接放置在它上面（这是一个z-index/overlay事物）。当用户用光标离开那个盒子时，应该播放一个动画，并在其结尾处删除该盒子（）。克隆的元素不能被删除

问题是动画完成但克隆没有被删除。我使用console.logs和警报来告诉我动画是否完成，并且它警告的很好，但在动画完成后克隆的客户端没有完成任何操作。下面是一个示例：

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

slideUp完成后，会触发警报，但不会移除警报。

这里有一个的jsfiddle所以你可以看到发生了什么

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

来源

2013-02-28 dcap

正在调用'remove'。这只是你在DOM中有多个克隆。它正在删除其中一个克隆，但其他的仍在，并且一直在'mouseenter'上添加。 – 2013-02-28 15:50:41

MouseEnter事件被触发两次（因为selected-client克隆也有一类client。如果在mouseenter事件中添加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>

如果要触发的元素是您的selected-client，您将希望省略mouseenter事件。

即在你的第一个事件处理程序：

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');

来源

2013-02-28 15:51:38

你可不可以添加'：not（'selected-client'）'到原始选择器吗？ – Blazemonger 2013-02-28 15:54:35

是的，这也是作品 – 2013-02-28 15:55:12

如果我理解正确的话，我认为你要替换clonedClient.remove();

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

来源

2013-02-28 15:46:31 chead23

您正在使用$(document).on()，这意味着事件处理程序连接记录。当您克隆您的元素时，类别.client也被应用于该克隆。当你在原始文件后插入克隆时，mouseenter再次被激发，因为你输入了新克隆的元素（这里创建了另一个克隆）。

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

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

来源

2013-02-28 15:51:50 Lian

我会删除。客户端，但它也绑定到CSS样式 – dcap 2013-02-28 15:59:35

克隆的元素不能被删除

回答

相关问题