不能删除jQuery中的克隆元素

Question

我已经克隆了jQuery中的元素，现在想要在单击克隆元素的“x”时删除此元素。

有一种codepen这里：http://codepen.io/emilychews/pen/YZGxWZ

我不能工作了，如果它不工作的原因是因为我需要返回的功能外变量$ myClone（我已经试过）或者如果我需要在嵌套函数的主函数内部发生任何事情？

由于某种原因，当我点击预先加载的'x'来删除它时，或者预先加载的'x'本身，jQuery不会识别克隆的元素。

$(document).ready(function() { 
 

 
    $('.holder').click(function() { 
 
    var $myClone = $(this).clone() 
 
     .appendTo(this) 
 
     .addClass('cloned') 
 
     .css({ 
 
     position: 'absolute', 
 
     background: 'blue', 
 
     top: 0, 
 
     'z-index': 10, 
 
     left: 0 
 
     }); 
 

 
    $($myClone).prepend('<div class="closeX">X</div>'); 
 

 
    $('.closeX').click(function() { 
 
     $($myClone).remove(); 
 
    }); 
 

 
    }); 
 

 
});

.wrapper { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.holder { 
 
    width: 20vw; 
 
    height: 100px; 
 
    background: red; 
 
    position: relative; 
 
    margin-bottom: 5px; 
 
    display: inline-block; 
 
    transition: all .25s ease-out; 
 
    z-index: 0; 
 
    transform-origin: top left; 
 
} 
 

 

 
/*CSS for the prepended 'x' that shows on cloned element*/ 
 

 
.closeX { 
 
    position: absolute; 
 
    background: yellow; 
 
    top: 5px; 
 
    right: 5px; 
 
    width: 25px; 
 
    height: 25px; 
 
    line-height: 25px; 
 
    text-align: center; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="holder image1">Image 1</div> 
 
    <div class="holder image2">Image 2</div> 
 
    <div class="holder image3">Image 3</div> 
 
    <div class="holder image4">Image 4</div> 
 
    <div class="holder image5">Image 5</div> 
 
</div>

Answer 1

您有几个问题。

你克隆，每点击股利和X
1. 你只需要删除点击DIV
2. 你需要委派点击，并有它的点击处理程序之外的父母

$(function() { 
 

 
    $('.holder').on("click",function() { 
 
    if ($(this).find(".cloned").length == 0) { // no cloned already 
 
     var $myClone = $(this).clone() 
 
     .appendTo(this) 
 
     .addClass('cloned') 
 
     .css({ 
 
      position: 'absolute', 
 
      background: 'blue', 
 
      top: 0, 
 
      'z-index': 10, 
 
      left: 0 
 
     }); 
 

 
     $myClone.prepend('<div class="closeX">X</div>'); 
 
    } 
 

 
    }); 
 
    $(".wrapper").on("click", ".closeX", function(e) { 
 
    e.stopPropagation(); // this stops the click on the holder 
 
    $(this).closest("div.cloned").remove(); 
 
    }); 
 
});

.wrapper { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.holder { 
 
    width: 20vw; 
 
    height: 100px; 
 
    background: red; 
 
    position: relative; 
 
    margin-bottom: 5px; 
 
    display: inline-block; 
 
    transition: all .25s ease-out; 
 
    z-index: 0; 
 
    transform-origin: top left; 
 
} 
 

 

 
/*CSS for the prepended 'x' that shows on cloned element*/ 
 

 
.closeX { 
 
    position: absolute; 
 
    background: yellow; 
 
    top: 5px; 
 
    right: 5px; 
 
    width: 25px; 
 
    height: 25px; 
 
    line-height: 25px; 
 
    text-align: center; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="holder image1">Image 1</div> 
 
    <div class="holder image2">Image 2</div> 
 
    <div class="holder image3">Image 3</div> 
 
    <div class="holder image4">Image 4</div> 
 
    <div class="holder image5">Image 5</div> 
 
</div>

Answer 2

这是你更新的代码

$(document).ready (function(){ 

    $('.wrapper').on('click', '.holder', function() { 
    var $myClone = $(this).clone() 
    .appendTo(this) 
    .addClass('cloned') 
    .css({ 
     position: 'absolute', 
     background: 'blue', 
     top: 0, 
     'z-index' : 10, 
     left: 0 
    }); 

    $myClone.prepend('<div class="closeX">X</div>'); 

    $myClone.find('.closeX').click(function(){ 
     $myClone.remove(); 
    }); 
    }); 

}); 

变化：

• $(this).clone()已经返回一个jQuery对象，所以你不需要把它包起来后与$($myClone)，你可以使用$ myClone目录ectly
• 您正在搜索所有.closeX类 - 你应该在$myClone变量内搜索。这就是为什么我更新了代码$myClone.find('.closeX').click(..)
• 同样的问题与$('.holder') - 它会给你多于一个元素时搜索它。更好地使用on()功能.wrapper