Question

我想要做的是在单击按钮后通过ID删除父级div，以避免关闭具有相同类的所有div。在我的实际代码中，用户可以在按钮点击时将多个div添加到屏幕，并为每个div分配自己的ID。每个顶部都有一个boostrap按钮，它应该只关闭父div而不必创建12个单独的函数（用户的div放置限制）。

HTML

<div class='some classes' id='box1'>
<span class='btn btn-primary'>Close this div</span>
</div>
<div class='some classes' id='box2'>
<span class='btn btn-primary'>Close this div</span>
</div>

CSS

#box {
  width:200px;
  height:200px;
  background:black;
}

JS

$(document).ready(function(){
  $('.btn').on('click',function(){
    var getParentID = $('.btn').parent().attr('id');
    $(getParentID).remove();
});
});

这基本上就是我正在努力尝试让它发挥作用。非常感谢任何帮助！

Answer 1

使用$(this)代替$('.btn')，因为您要定位特定元素

var getParentID = $(this).parent().attr('id'); 一旦id可用，使用jquery id选择器来定位元素

$(document).ready(function() {
  $('.btn').on('click', function() {
    var getParentID = $(this).parent().attr('id');
    $("#" + getParentID).remove();
  });
});

#box {
  width: 200px;
  height: 200px;
  background: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='some classes' id='box1'>
  <span class='btn btn-primary'>Close this div</span>
</div>
<div class='some classes' id='box2'>
  <span class='btn btn-primary'>Close this div</span>
</div>

注意：答案特定于您的问题。或者，父div可以删除，即使没有得到它的id

Answer 2

你想要做的是跳过jQuery并在纯JavaScript中完成。

var parent = child.parentElement;
parent.parentElement.removeChild(parent);

通过单击子元素获取父div ID

2 个答案: