简体   繁体   中英

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

I am trying to delete the closest but all divs are being removed.

Example: if I click fa-close under Rooms the incl-ingd should be removed

<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>

As of now I've tried this jQuery:

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

But all the incl-ingd is being removed.

Is this possible?

Check this script

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

Your code is working fine, please find the below working snippet

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

Well your code works for me. If it doesn't work for you, make sure font-awesome and jQuery library or CDN has been included properly. If still it doesn't work, then try to use:

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

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM