Why is the item not being removed from the MODX MINISHOP2 cart?

Question

MODX

When you click on the delete product button, only the product photo is deleted, and the block itself remains until the page is reloaded. Tell me what could be the problem ?

<div id="msCart">
    {if !count($products)}
        <div class="alert alert-warning">
            {'ms2_cart_is_empty' | lexicon}
        </div>
    {else}
    {foreach $products as $product}
        <div class="row col-12 mr-0 mb-5">
            <div class="col-6">
<div class="remove">
                            <form method="post" class="ms2_form text-md-right">
                                <input type="hidden" name="key" value="{$product.key}">
                                <button class="btn btn-sm " style="margin: -6px -5px -6px -21px;
    position: absolute;
    border-radius: 50%;
    background-color:#ff542e;" 
    type="submit" name="ms2_action" value="cart/remove">
                                    <i class="fa fa-times" style="color: white;" aria-hidden="true"></i></button>
                            </form>
                        </div>
                    {var $image}
                           {if $product.thumb?}
                            <img class="img-fluid im-cart" src="{$product.thumb}" alt="{$product.pagetitle}" title="{$product.pagetitle}"/>
                        {else}
                            <img class="img-fluid im-cart" src="{'assets_url' | option}components/minishop2/img/web/ms2_small.png"
                                 srcset="{'assets_url' | option}assets/images/logo_navbar.png 2x"
                                 alt="{$product.pagetitle}" title="{$product.pagetitle}"/>
                        {/if}
                    {/var}
                <section id="{$product.key}">
                    <div class="d-flex row">
                                <div class="image mw-100 pr-3 ">
                                    {if $product.id?}
                                        <a  href="{$product.id | url}">{$image}</a>
                                    {else}
                                        {$image}
                                    {/if}
                                </div>
                                </div>
            </div>
            <div class="col-6">
                                                                         <div class="title mb-3" style="float:left;">
                                                                                        <div class="title tit-cart">
                                    {if $product.id?}
                                        <a href="{$product.id | url}">{$product.pagetitle}</a>
                                    {else}
                                        {$product.name}
                                    {/if}
                                    {if $product.options?}
                                                                    {foreach $product.options as $key => $option}
                                    {if $key in ['modification','modifications','msal']}{continue}{/if}
                                                                {if $option is array} 
                                    {$caption} - {$option | join : '; '} <br>
                                    {else}
                                     <div class="small">
                                            {$caption} - {$option} 
                                        </div>
                                    {/if}
                                                                    {/foreach}
                            {/if}
                                                                    </div>
                            </div>
                        </section>
                        <div class="count">
                            <form method="post" class="ms2_form" role="form" >
                                <input type="hidden" name="key" value="{$product.key}"/>
                                <div class="form-group" style="
    width: 66%;
    margin:0;
">
                                    <div class="input-group input-group-sm">
                                        <input type="number" name="count" value="{$product.count}" class="form-control mr-2" style="
   height: 1.7rem!important;
    border-radius: 16px 16px 16px 16px;
    width: 7px;
    background-color: #f0f0f0;
    text-align: center;
"/>
                                                                                   <b class="col-2">{'ms2_frontend_count_unit' | lexicon}</b>
                                                                            </div>
                                    <button class="btn btn-sm" type="submit" name="ms2_action" value="cart/change">&#8635;</button>
                                </div>
                            </form>
                        </div>
                                                <div class="price mt-3" style="float:left;"><b style="color:#b5b5b5;">{'ms2_cart_price' | lexicon}:</b>
                            <span class="ml-4 text-nowrap"><b>{$product.price} {'ms2_frontend_currency' | lexicon}</b></span>
                            {if $product.old_price?}
                                <span class="old_price text-nowrap">{$product.old_price} {'ms2_frontend_currency' | lexicon}</span>
                            {/if}
                               </div>
            </div>
            </div>
                {/foreach}
            <div class="footer-car">
                <div class="row col-12 mb-4 mt-4">
                    <div class="col-6 ">
                        <b style="color:#b5b5b5;" class="total">
                            {'ms2_cart_total' | lexicon}:
                        </b>
                    </div>
                    <div class="col-6 total_cost">
                        <b  class="ms2_total_cost">
                            {$total.cost} {'ms2_frontend_currency' | lexicon}
                        </b>
                    </div>
                </div>                                                      
                </div>
        </div>
    {/if}
</div>

Answer 1

You need to find out who exactly deletes the photo (the basic logic of the minishop or wrote a custom code that, having received the result of the deletion through the Ajax request, deletes only the picture instead of the whole block), whether the identifiers are assigned correctly.

Answer 2

Look at the original chunk. Each line should have, if I'm not mistaken, a data attribute with {$product.key}