无法在jQuery中删除克隆元素

Question

我已经在jQuery中克隆了一个元素，现在想要在点击“x＆＃39;”时删除它。克隆元素。

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

如果它不起作用的原因是因为我需要在函数外部返回变量$ myClone（我已尝试过），或者如果我需要所有内容，我就无法解决问题使用嵌套函数在main函数内部发生？

由于某些原因，当我点击前面的＆＃39; x＆＃39;时，jQuery不会识别克隆的元素。删除它，或前面的＆＃39; x＆＃39;本身。

＆＃13;

＆＃13;

$(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();
    });

  });

});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>