How to remove line item from shopify cart without page refresh?

Question

I'm trying to remove Shopify line cart line item on click without page refresh. I have no success about this.

<a href="/cart/change?line={{ forloop.index }}&amp;quantity=0">remove</a> it will work with cart page loading. I want without page reload.

After comment adding full cart popup code.

Cart HTML popup

<div class="cart-popup" id="cartPopup">
    <form action="/cart" method="post" novalidate>
        <div class="cartpopup-header d-flex flex-row align-items-center justify-content-between">
            <h4>Your Cart</h4>
            <button class="hide-popup" role="button" type="button">
                <i class="fal fa-times"></i>
            </button>
        </div>
        <div class="cartpopup-body d-flex flex-column">
            {% for item in cart.items %}
                <div class="cartpopup-item d-flex flex-row">
                    <div class="cartpopup-item-image">
                        <a href="{{ item.url | within: collections.all }}">
                            <img class="img-fluid d-block" src="{{ item | img_url: 'medium' }}" alt="{{ item.title | escape }}">
                        </a>
                    </div>
                    <div class="cartpopup-item-content d-flex flex-column">
                        <h5><a href="{{ item.url }}">{{ item.product.title }}</a></h5>
                        <span class="variant">{{ item.variant.title }}</span>
                        <span class="price">{{ item.price | money }}</span>
                        <div class="quantity-box d-flex flex-row">
                            <button class="quantity-button qminus" role="button" type="button" data-variant="{{ item.variant.id }}"><i class="fal fa-minus"></i></button>
                            <input class="quantity-input" type="number" disabled name="updates[]" id="updates_{{ item.key }}" value="{{ item.quantity }}" min="1" />
                            <button class="quantity-button qplus" role="button" type="button" data-variant="{{ item.variant.id }}"><i class="fal fa-plus"></i></button>
                        </div>
                        <div class="d-flex flex-row">
                            <a class="remove" data-variant="{{ item.variant.id }}" href="/cart/change?line={{ forloop.index }}&amp;quantity=0">Remove</a>
                        </div>
                    </div>
                </div>
                <!-- Each item -->
            {% endfor %}
        </div>
        <div class="cartpopup-footer d-flex flex-column">
            <div class="cartpopup-total d-flex flex-row align-items-center justify-content-between">
                <span>Total</span>
                <span class="price">{{ cart.total_price | money }}</span>
            </div>
            <div class="cartpopup-buttons d-flex flex-row justify-content-between">
                <button class="cartpopup-button" type="submit" name="checkout">Checkout</button>
                <a class="cartpopup-button-alter" href="{{ routes.cart_url }}">Your Cart</a>
            </div>
        </div>
    </form>
</div>

Cart append script

$('.varients-item').on('click', function(){
    var obj = $(this);
    var variants_id = $(this).attr("data-variant");
    $.ajax({
        type: 'POST',
        url: '/cart/add.js',
        data: {
            quantity: 1,
            id: variants_id
        },
        dataType: 'json',
        success: function (data) {
            $.ajax({
                type: 'GET',
                dataType: 'jsonp',
                url: '/cart.json',
                success: function(cart){

                    var item_count = cart['item_count'];
                    var total_price = cart['total_price']/100;

                    //If there are items in cart
                    if ( item_count > 0 ) {
                        // cart count
                        $('.cart-item-count span').text(item_count);

                        // mini cart data
                        $('.cart-popup').attr('id','cartPopup');
                        $('.cartpopup-total .price').text( '£' + total_price.toFixed(2) );


                        var cart_list = [];

                        for( var i = 0; i < item_count; i++ ){
                            if ( cart['items'][i]['id'] != null ) {
                                var item_id = cart['items'][i]['id'];
                                var product_title = cart['items'][i]['product_title'];
                                // var product_title = data['items'][i]['title'];
                                var product_handle = cart['items'][i]['handle'];
                                var quantity = cart['items'][i]['quantity'];
                                var line_price = cart['items'][i]['price']/100;
                                var url = cart['items'][i]['url'];
                                var image_url = cart['items'][i]['image'];
                                var variants = cart['items'][i]['variant_options'];

                                if ( product_title == 'Gift Wrap' ) {
                                    var product_url = product_title;
                                } else {
                                    var product_url = '<a href="' + url + '">' + product_title + '</a>';
                                }

                                var options = [];
                                for ( var o = 0; o < variants.length; o++ ) {
                                    var selected = cart['items'][i]['variant_options'][o];
                                    if ( selected !== 'Default Title' ) {
                                        options.push( selected + '<br>' );
                                    }
                                };
                                var selected_options = options.join('');

                                cart_list.push(
                                    '<div class="cartpopup-item d-flex flex-row">'+
                                        '<div class="cartpopup-item-image">'+
                                            '<a href="' + url + '">'+
                                                '<img class="img-fluid d-block" src="' + image_url + '"  alt="' + product_title + '" />'+
                                            '</a>'+
                                        '</div>'+
                                        '<div class="cartpopup-item-content d-flex flex-column">'+
                                            '<h5>' + product_url + '</h5>'+
                                            '<span class="variant">' + selected_options + '</span>'+
                                            '<span class="price">£' + total_price.toFixed(2) + '</span>'+
                                            '<div class="quantity-box d-flex flex-row">'+
                                                '<button class="quantity-button qminus" role="button" type="button" data-variant="' + item_id + '"><i class="fal fa-minus"></i></button>'+
                                                '<input class="quantity-input" type="number" disabled name="updates[]" id="updates_' + item_id + '" value="' + quantity + '" min="1" />'+
                                                '<button class="quantity-button qplus" role="button" type="button" data-variant="' + item_id + '"><i class="fal fa-plus"></i></button>'+
                                            '</div>'+
                                            '<div class="d-flex flex-row">'+
                                                '<a class="remove" data-cart-remove-id="' + item_id + '" href="/cart/change?line=' + item_count + '&amp;quantity=0">Remove</a>'+
                                            '</div>'+
                                        '</div>'+
                                    '</div>'
                                );
                            } //endif
                        }; // endfor

                        $('.cartpopup-body').html( cart_list.join('') );
                    }
                }
            });
        }
    });
});

Update popup quantity Minus

$('.cart-popup .cartpopup-body ').on('click', '.quantity-button.qminus', function(){
    if ($(this).next().val() > 1) {
        var quantityItem = $(this).next().val(+$(this).next().val() - 1);
    }
    var vId = $(this).attr("data-variant");
    var quantityVal = $(this).next().val();
    $.ajax({
        type: 'POST',
        url: '/cart/change.js',
        dataType: 'json',
        data: {
            quantity: quantityVal,
            id: vId
        },
        success: function (data){
            $.ajax({
                type: 'GET',
                dataType: 'jsonp',
                url: '/cart.json',
                success: function(cart){
                    var item_count = cart['item_count'];
                    var total_price = cart['total_price']/100;

                    if ( item_count > 0 ) {
                        $('.cart-item-count span').text(item_count);

                        // mini cart data
                        $('.cart-popup').attr('id','cartPopup');
                        $('.cartpopup-total .price').text( '£' + total_price.toFixed(2) );
                    }
                }
            });
        }
    });
});

Update popup quantity plus

$('.cart-popup .cartpopup-body').on('click', '.quantity-button.qplus', function(){
    $(this).prev().val(+$(this).prev().val() + 1);
    var vId = $(this).attr("data-variant");
    var quantityVal = $(this).prev().val();
    $.ajax({
        type: 'POST',
        url: '/cart/add.js',
        dataType: 'json',
        data: {
            quantity: 1,
            id: vId
        },
        success: function (data){
            $.ajax({
                type: 'GET',
                dataType: 'jsonp',
                url: '/cart.json',
                success: function(cart){
                    var item_count = cart['item_count'];
                    var total_price = cart['total_price']/100;

                    if ( item_count > 0 ) {
                        $('.cart-item-count span').text(item_count);

                        // mini cart data
                        $('.cart-popup').attr('id','cartPopup');
                        $('.cartpopup-total .price').text( '£' + total_price.toFixed(2) );
                    }
                }
            });
        }
    });
});

Remove cart line item script

$('.cart-popup .cartpopup-body').on('click', '.cartpopup-item .remove', function(e){
    var obj = $(this);
    e.preventDefault();
    e.stopPropagation();

    var productId = $(this).attr('data-variant');

    $.ajax({
        type: 'POST',
        url: '/cart/update.js',
        dataType: 'json',
        data: {
            quantity: 0,
            id: productId
        },
        success: function (data){
            $.ajax({
                type: 'GET',
                dataType: 'jsonp',
                url: '/cart.json',
                success: function(cart){
                    var item_count = cart['item_count'];
                    var total_price = cart['total_price']/100;

                    if ( item_count > 0 ) {

                        $('.cart-item-count span').text(item_count);

                        // mini cart data
                        $('.cart-popup').attr('id','cartPopup');
                        $('.cartpopup-total .price').text( '£' + total_price.toFixed(2) );

                        // Remove item

                        $(this).parents('.cartpopup-item').remove();
                    }

                }
            });
        }
    });
});

Cart popup SCSS code

.cart-popup{
    background-color: white;
    //display: none;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 30px;
    position: fixed;
    right: 0;
    top: 0;
    -webkit-transform: translateX(100%);
        -ms-transform: translateX(100%);
            transform: translateX(100%);
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
    width: 380px;
    z-index: 1060;
    &.active{
        -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
                transform: translateX(0);
        display: block;
    }
    .cartpopup-header{
        border-bottom: 1px solid rgba(#cbcbcb, 0.5);
        margin-bottom: 30px;
        padding-bottom: 30px;
        h4{
            color: #212121;
            font-size: 35px;
            font-weight: 700;
            line-height: .9;
            margin-bottom: 0;
        }
        .hide-popup{
            background-color: transparent;
            border: none;
            border-radius: 0;
            color: #212121;
            font-size: 20px;
            line-height: 1;
            padding: 0;
        }
    }
    .cartpopup-body{
        .cartpopup-item{
            border-bottom: 1px solid rgba(#cbcbcb, 0.5);
            padding-bottom: 30px;
            &:not(:last-child){
                margin-bottom: 30px;
            }
            .cartpopup-item-image{
                flex-basis: 115px;
                flex-grow: 0;
                flex-shrink: 0;
                max-width: 115px;
                a{
                    display: block;
                }
            }
            .cartpopup-item-content{
                flex-basis: calc(100% - 115px);
                flex-grow: 0;
                flex-shrink: 0;
                max-width: calc(100% - 115px);
                padding-left: 15px;
                h5{
                    margin-bottom: 0;
                    a{
                        color: #212121;
                        font-size: 1rem;
                        font-weight: 300;
                        line-height: 1.25;
                        transition: all 0.3s ease-in-out 0s;
                        &:hover{
                            color: #00cece;
                            text-decoration: none;
                        }
                    }
                }
                .variant,
                .price{
                    color: #a0a0a0;
                    font-size: 14px;
                    font-weight: 300;
                    line-height: 1.5;
                }
                .remove{
                    color: #c64141;
                    font-size: 14px;
                    font-weight: 300;
                    line-height: 1.25;
                }
                .quantity-box{
                    border: 1px solid rgba(#cbcbcb, 0.5);
                    margin-bottom: 15px;
                    margin-top: 10px;
                    max-width: 100px;
                    .quantity-button{
                        background-color: transparent;
                        border: none;
                        color: #a0a0a0;
                        font-size: 14px;
                        min-width: 25px;
                        padding: 0;
                        width: 25px;
                    }
                    .quantity-input{
                        -moz-appearance: textfield;
                        -webkit-appearance: none;
                        appearance: none;
                        -appearance: none;
                        background-color: transparent;
                        border-color: rgba(#cbcbcb, 0.5);
                        border-width: 0 1px;
                        border-style: solid;
                        box-shadow: none;
                        color: #a0a0a0;
                        font-size: 14px;
                        font-weight: 300;
                        height: 25px;
                        padding: 0 5px;
                        text-align: center;
                        white-space: nowrap;
                        width: 100%;
                        &::-webkit-outer-spin-button,
                        &::-webkit-inner-spin-button{
                            -webkit-appearance: none;
                            margin: 0;
                        }
                        &:hover{
                            box-shadow: none;
                        }
                    }
                }
            }
        }
    }
    .cartpopup-footer{
        .cartpopup-total{
            border-bottom: 1px solid rgba(#cbcbcb, 0.5);
            height: 65px;
            margin-bottom: 30px;
            span{
                color: #212121;
                font-size: 1rem;
                font-weight: 700;
                line-height: 1.5;
            }
        }
        .cartpopup-buttons{
            .cartpopup-button{
                background-color: $button-bg;
                border: 1px solid $button-border;
                border-radius: 0;
                color: $button-text;
                height: 50px;
                margin-right: 20px;
                padding: 5px;
                transition: all 0.3s ease-in-out 0s;
                width: 140px;
                &:hover,
                &:focus{
                    background-color: $button-bg-hover;
                    color: $button-text-hover;
                    text-decoration: none;
                }
            }
            .cartpopup-button-alter{
                align-items: center;
                background-color: $button-bg-hover;
                border: 1px solid $button-border;
                border-radius: 0;
                color: $button-text-hover;
                display: flex;
                flex-direction: row;
                height: 50px;
                justify-content: center;
                padding: 5px;
                transition: all 0.3s ease-in-out 0s;
                width: 140px;
                &:hover,
                &:focus{
                    background-color: $button-bg;
                    color: $button-text;
                    text-decoration: none;
                }
            }
        }
    }
}

• Q 1: Why my Ajax script is unable to remove cart line item from cart popup? What I did wrong? How to solve it?

• Q 2: Is this minicart script will work with removing line item and update quantity on click event in /cart page?

Answer 1

Change Ajax request URL from /cart/update.js to /cart/change.js