I am facing an issue with a cart popup that utilizes AJAX to display the cart contents. Within this popup, I have implemented an "X" link to remove specific items from the cart. However, despite using the code below,
$('#remove-from-cart').click(function(e) {
var link = $(this).attr('href');
e.preventDefault();
$.ajax({
url: link,
type:'GET',
success: function(data){
$('#receipt-wrapper .receipt-row-2').html($(data).find('.line-item-container').html());
}
});
});
The issue I am experiencing is that the X link retains its default behavior and redirects to the updated cart page immediately.
Here is the HTML for the "remove link":
<div class="grid__item receipt--hide small--one-sixth medium--one-sixth large--one-twelfth xlarge--one-twelfth icon-remove">
<p class="cart__product-meta">
<a href="/cart/change?line={{ forloop.index }}&quantity=0" id="remove-from-cart">
{% include 'svg-icon-remove' %}
</a>
</p>
</div>
I am uncertain of what exactly I am doing wrong in this scenario. (I should note that a similar block of JS code is being used successfully to display the popup)
Any insights or suggestions would be greatly appreciated. Thank you!