Kann ein geklontes Element in jQuery nicht entfernen

Question

Ich habe ein Element in jQuery geklont und möchte es jetzt entfernen, wenn ich auf das 'x' des geklonten Elements klicke.

Es ist ein codepen hier: http://codepen.io/emilychews/pen/YZGxWZ

Ich kann nicht arbeiten, wenn der Grund, warum es nicht funktioniert, weil ich die Variable $ myClone außerhalb der Funktion zurückgeben müssen (was ich versucht habe), oder wenn ich alles innerhalb der Hauptfunktion mit einer verschachtelten Funktion passieren muss?

Aus irgendeinem Grund erkennt jQuery entweder das geklonte Element nicht, wenn ich auf das vorangestellte "x" klicke, um es zu entfernen, oder das vorangestellte "x" selbst.

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

Sie haben mehrere Probleme.

1. Sie für jeden Klon klicken Sie auf div UND X
2. Sie müssen nur die Eltern des angeklickten div entfernen
3. Sie müssen den Klick delegieren und haben es außerhalb des Click-Handler

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

Dies ist die aktualisierte Code

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

}); 

Änderungen:

• $(this).clone() bereits gibt ein jQuery-Objekt, so dass Sie es diese nicht wickeln müssen Mit $($myClone) können Sie $ myClone dir verwenden ectly
• Sie suchten nach allen .closeX Klasse - Sie sollten innerhalb Ihrer $myClone Variable suchen. Deshalb habe ich den Code auf $myClone.find('.closeX').click(..)
• aktualisiert Das gleiche Problem geht mit $('.holder') - es wird Ihnen mehr als ein Element geben, wenn Sie danach suchen. Besser zu verwenden on() Funktionalität über .wrapper