amy burgess amy burgess - 4 years ago 73
HTML Question

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

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


But all the
incl-ingd
is being removed...

I'm not sure if this is possible but if it is, please help me out :)

Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download