jQueryでクローンされた要素を削除できない

Question

jQueryで要素をクローンしましたが、クローンされた要素の「x」をクリックするとこれを削除します。

ここにありcodepenさ：http://codepen.io/emilychews/pen/YZGxWZ

私は（私が試した）関数の外で変数$ myCloneを返却する必要があるので、それが機能していない理由がある場合、私はうまくいかないことができ、または、ネストされた関数を持つmain関数の内部ですべてが必要な場合はどうすればいいですか？

jQueryは何らかの理由で、前に付いていた 'x'をクリックしてクローンされた要素を削除したり、前に付いた '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

以上使用することをお勧めします。あなたはすべてのあなただけのクリックを委任し、クリックハンドラ外 それを持っている必要がクリックされたdivの

の親を削除する必要がdiv要素とX

をクリックするためにクローン

1. $(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ディレクトリを使用できますあなたの$myClone変数内を検索しているはずです。.closeXクラスすべてを検索していました。$myClone変数内を検索する必要があります。だから私はコードを$myClone.find('.closeX').click(..)に更新しました
• 同じ問題は$('.holder')と同じです - それはあなたがそれを探しているときに複数の要素を与えます。より良いon()機能を.wrapper