如何使用 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

您的代碼工作正常，請找到以下工作片段

 $("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 3

那么你的代碼對我有用。 如果它不適合您，請確保已正確包含font-awesome和jQuery庫或 CDN。 如果仍然不起作用，請嘗試使用：

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

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>