javascript - Jquery:如何在其他元素中隐藏元素?

标签 javascript jquery html css

如何通过单击“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/

相关文章:

javascript - Node.js 将每一行分成一个整数数组

html - Foundation vertical (Split Layout) Off-Canvas 覆盖整个屏幕且仅在移动屏幕上

php - 如何在 PHP 代码中使用 Select 显示多列

javascript - addRule/insertRule 在本地不工作

javascript - 水平滑动使用jquery ui

javascript - 使用 Javascript 从 html FORM 发送发布数据?

Javascript substr();按单词而不是字符限制

javascript - jQuery 和 JavaScript 有不同的命名空间吗?

带有绑定(bind)点击事件的 Javascript 循环总是返回最后的结果

jquery - 添加较大文本时动画宽度调整大小