如何使用 jQuery 删除整个基于 div 的点击子项？

Question

我正在尝试删除最近的但所有 div 都被删除了。

示例：如果我在房间下单击 fa-close，则应删除 incl-ingd

<div class="btn-group incl-ingd">
    <div type="button" class="btn btn-default">
        Rooms <i class="fa fa-close"></i>
    </div>
</div>
<div class="btn-group incl-ingd">
    <div type="button" class="btn btn-default">
        Mansions <i class="fa fa-close"></i>
    </div>
</div>

截至目前，我已经尝试过 jQuery:

$("i.fa-close").on('click', function(e) {
    $(this).closest('div.incl-ingd').remove();
});

但是所有 incl-ingd 都被删除了。

这可能吗？

Answer 1

检查这个脚本

$(function(){
  $("i.fa-close").on('click', function(e) {
    $(this).parent().parent().remove();
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="btn-group incl-ingd">
    <div type="button" class="btn btn-default">
        Rooms <i class="fa fa-close"></i>
    </div>
</div>
<div class="btn-group incl-ingd">
    <div type="button" class="btn btn-default">
        Mansions <i class="fa fa-close"></i>
    </div>
</div>

Answer 2

嗯，你的代码对我有用。如果它对您不起作用，请确保 font-awesome 和 jQuery 库或 CDN 已正确包含。如果仍然不起作用，请尝试使用：

$("i.fa-close").on('click', function() {
    $(this).closest('div.incl-ingd').remove();
});

Answer 3

您的代码工作正常，请找到下面的工作代码段

$("i.fa-close").on('click', function(e) {
    $(this).closest('div.incl-ingd').remove();
})

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="btn-group incl-ingd">
    <div type="button" class="btn btn-default">
        Rooms <i class="fa fa-close"></i>
    </div>
</div>
<div class="btn-group incl-ingd">
    <div type="button" class="btn btn-default">
        Mansions <i class="fa fa-close"></i>
    </div>
</div>

Answer 4

<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery("i.fa-close").click(function(){
     jQuery(this).parents('div').remove();
  );
});

Answer 5

$(document).ready(function(){
$("i.fa-close").click(function(){
  $(this).parent().parent().remove()
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="btn-group incl-ingd">
    <div type="button" class="btn btn-default">
        Rooms <i class="fa fa-close"></i>
    </div>
</div>
<div class="btn-group incl-ingd">
    <div type="button" class="btn btn-default">
        Mansions <i class="fa fa-close"></i>
    </div>
</div>

如何使用 jQuery 删除整个基于 div 的点击子项？

How to remove the whole div based clicked child using jQuery?

html

javascript

jquery

parent

parent-child

检查这个脚本