javascript - 通过单击子元素获取父级 div id

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>

注意:答案特定于您的问题。或者，即使没有获取其 id，也可以删除父 div