ali ali - 4 years ago 111
Javascript Question

Remove element in jQuery

This is DOM, there is a button to remove the parent here:

<i class="fa fa-times remove-product-compare" aria-hidden="true"></i>


This is my DOM:

<div class="col-lg-12 col-md-12 col-xs-12 pull-right comp-container" style="padding: 0;margin: 10px 0 10px 0;">
<div class="col-lg-3 col-xs-12 col-md-3 pull-right compareProduct">
<h3 style="text-align: right;">
product
</h3>
<i class="fa fa-times remove-product-compare" aria-hidden="true"></i>
<img src="images/photos/6.jpg" class="img-thumbnail img-responsive" style="height: 250px;width: 100%" />
</div>
<div class="col-lg-3 col-xs-12 col-md-3 pull-right compareProduct">
<h3 style="text-align: right;">
product2
</h3>
<i class="fa fa-times remove-product-compare" aria-hidden="true"></i>
<img src="images/photos/2.jpg" class="img-thumbnail img-responsive" style="height: 250px;width: 100%" />
</div>
<div class="col-lg-3 col-xs-12 col-md-3 pull-right compareProduct">
<h3 style="text-align: right;">
product3
</h3>
<i class="fa fa-times remove-product-compare" aria-hidden="true"></i>
<img src="images/photos/3.jpg" class="img-thumbnail img-responsive" style="height: 250px;width: 100%" />
</div>




This Javascript code is supposed to hide the parent and works correctly:

$(".remove-product-compare").on("click",function (e) {
$(this).parent().hide();
});


But this code is supposed to remove the parent from the DOM and doesn't work:

$(".remove-product-compare").on("click",function (e) {
$(this).parent().remove();
});

Answer Source

The parent() method returns the direct parent element of the selected element.

$(function() {
$(".remove-product-compare").click(function (e) {
       $(this).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="col-lg-12 col-md-12 col-xs-12 pull-right comp-container" style="padding: 0;margin: 10px 0 10px 0;">
<div class="col-lg-3 col-xs-12 col-md-3 pull-right compareProduct">
        <h3 style="text-align: right;">
product
        </h3>
        <i class="fa fa-times remove-product-compare" aria-hidden="true"></i>
        <img src="images/photos/6.jpg" class="img-thumbnail img-responsive" style="height: 250px;width: 100%" />
</div>
<div class="col-lg-3 col-xs-12 col-md-3 pull-right compareProduct">
    <h3 style="text-align: right;">
        product2
    </h3>
    <i class="fa fa-times remove-product-compare" aria-hidden="true"></i>
    <img src="images/photos/2.jpg" class="img-thumbnail img-responsive" style="height: 250px;width: 100%" />
</div>
<div class="col-lg-3 col-xs-12 col-md-3 pull-right compareProduct">
    <h3 style="text-align: right;">
        product3
    </h3>
    <i class="fa fa-times remove-product-compare" aria-hidden="true"></i>
    <img src="images/photos/3.jpg" class="img-thumbnail img-responsive" style="height: 250px;width: 100%" />
</div>

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