我已經克隆了jQuery中的元素,現在想要在單擊克隆元素的「x」時刪除此元素。不能刪除jQuery中的克隆元素
有一種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>
謝謝。這真的很有幫助。 –