如何通过单击“cube-2”包含的“click-me”来隐藏“cube-2”? 我做了一个事件,但它删除了我所有的 cube-2,我想一个一个地隐藏 cube-2。任何人都可以解决这个问题吗?请帮助我。
$('.cube-1').click(function name(params) {
$('.cube-1').append('<div class="cube-2"><div class="click-me">click me to hide this cube</div></div>');
// how to add event click on "click-me" to hide "cube-2"??
})
.cube-1 {
width: 100px;
height: 100px;
float: left;
background: blue;
}
.cube-2 {
margin-left: 100px;
width: 100px;
height: 100px;
float: left;
background: red;
}
.click-me {
width: 100%;
height: 50px;
background: white;
}
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<div class="cube-1"></div>
</html>
最佳答案
您可以将一个 id 添加到您的 cube-2 div 及其相应的 click-me anchor 标记,并仅删除具有该 Id 的 div。
您可能还想查看 Template string
$('.cube-1').click(function name(e) {
var cubeCounter = 1;
if (e.target.className == "cube-1") {
$('.cube-1').append(`<div class=cube-2 id=cube-${cubeCounter}><div class=click-me id=${cubeCounter}>click me to hide this cube</div></div>`);
cubeCounter++;
}
})
$(document).on('click', '.click-me', function name(e) {
var cubeId = e.target.id;
$(`#cube-${cubeId}`).remove();
})
关于javascript - Jquery:如何在其他元素中隐藏元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58405898/