无法删除 jQuery 中的克隆元素

Question

我在 jQuery 中克隆了一个元素，现在我想在单击克隆元素的“x”时删除它。

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

我无法确定它不起作用的原因是因为我需要在函数外部返回变量 $myClone（我已经尝试过），或者我需要在主函数内部发生所有事情嵌套函数？

由于某种原因，当我单击附加的“x”将其删除时，jQuery 无法识别克隆的元素，或者附加的“x”本身。

$(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

你有几个问题。

1. 每次点击 div AND X 都会克隆
2. 你只需要删除被点击的div的父级
3. 您需要委托点击并将其置于点击处理程序之外

$(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>