i want to remove the parent of the parent of 'this' in jquery

Question

I have a span .icon-trash in a div parent in another div parent I want when I click it to remove .item-append and I have many of the .item-append

       <div class="item-append">
           <div class="cont1">
               <img src="">
           </div>
           <div class="cont2">
               <span class="qua">
                   <span class="icon-trash"></span>
                </span>
            </div>
        </div>

I tried jQuery but a don't know what should I put in the selector

$('.icon-trash').on('click', function () {
  $(selector).remove();
});

Answer 1

To remove the .item-append element when the .icon-trash element is clicked, you can use the following code:

$('.icon-trash').on('click', function() {
  $(this).closest('.item-append').remove();
});

In the code above, this refers to the .icon-trash element that was clicked. The closest() method is used to find the nearest ancestor element that matches the given selector (in this case, .item-append ).

Alternatively, you could also use the following code to achieve the same result:

$('.icon-trash').on('click', function() {
  $(this).parent().parent().remove();
});

In this case, the parent() method is used twice to move up the DOM tree from the .icon-trash element to its parent .cont2 element, and then to its parent .item-append element, which is then removed.

Answer 2

If you just want to remove the class form the .item-append , try this

$('.icon-trash').on('click', function () {
    $(this).closest('.item-append').removeClass('item-append');
});

https://api.jquery.com/removeclass/