Как остановить событие, но не запрещать отправку данных в JS или чем заменить метод stopPropagation() [закрыт]

Делаю магазин на Python Django. Есть всплывающее окно предпросмотра корзины на JS. В корзине товары и удаление товаров. При нажатии удаления товара возникает ошибка, т.к. метод stopPropagation не дает отправить данные. Два дня сижу, не могу найти, чем его заменить. Help me please ☺

JS появления и исчезания окна:

function popupSideMenu($sideMenu, $sideMunuOpen, $sideMenuCls, $toggleCls) {
    // Sidebar Popup
    $($sideMunuOpen).on('click', function (e) {
      e.preventDefault();
      $($sideMenu).addClass($toggleCls);
    });
    $($sideMenu).on('click', function (e) {
      e.stopPropagation();
      $($sideMenu).removeClass($toggleCls);
    });
    var sideMenuChild = $sideMenu + ' > div';
    $(sideMenuChild).on('click', function (e) {
      e.stopPropagation();
      $($sideMenu).addClass($toggleCls);
    });
    $($sideMenuCls).on('click', function (e) {
      e.preventDefault();
      e.stopPropagation();
      $($sideMenu).removeClass($toggleCls);
    });
  };
  popupSideMenu('.sidemenu-wrapper', '.sideMenuToggler', '.sideMenuCls', 'show');

HTML самого окна:

<div class="sidemenu-wrapper d-none d-lg-block " id="cart-items-container-index">
        <div class="sidemenu-content">
            <button class="closeButton border-theme text-theme bg-theme-hover sideMenuCls"><i class="far fa-times"></i></button>
            <div class="widget widget_shopping_cart">
                <h3 class="widget_title">Товары в корзине</h3>
                <div class="widget_shopping_cart_content">

                    <ul class="cart_list ">

                        {% for cart in carts %}
                            <li class="mini_cart_item">
                                <a href="{% url 'cart:cart_remove' %}" id="remove-from-cart" class="remove" data-cart-id="{{ cart.id }}">
                                    {% csrf_token %}
                                    <i class="fal fa-trash-alt"></i>
                                </a>
                                <a href="shop.html"><img src="{{ cart.product.image.url }}" alt="Cart Image">{{ cart.product.name }}</a>
                                <span class="quantity">{{ cart.quantity }} Шт
                                    <span class="amount">
                                        Цена: {{ cart.product.sell_price }}<span>Р</span>
                                    </span>
                                </span>
                            </li>
                        {% endfor %}

                    </ul>
                    <p class="total">
                        <strong>Итого:</strong>
                        <span class="amount">
                            {{ carts.total_price }}<span>Р</span>
                        </span>
                    </p>
                    <p class="buttons" >
                        <a href="{% url 'users:users_cart' %}" class="vs-btn">Перейти в корзину</a>
                    </p>
                </div>
            </div>
        </div>
    </div>

CSS Окна, может, понадобится:

.sidemenu-wrapper {
  position: fixed;
  z-index: 99999;
  right: 0;
  top: 0;
  height: 100%;
  width: 0;
  background-color: rgba(0, 0, 0, 0.75);
  opacity: 0;
  visibility: hidden;
  transition: all ease 0.8s;
}
.sidemenu-wrapper .closeButton {
  display: inline-block;
  border: 2px solid;
  width: 50px;
  height: 50px;
  line-height: 48px;
  font-size: 24px;
  padding: 0;
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: var(--white-color);
  border-radius: 50%;
  transform: rotate(0);
  transition: all ease 0.4s;
}
.sidemenu-wrapper .closeButton:hover {
  color: var(--white-color);
  border-color: transparent;
  transform: rotate(90deg);
}
.sidemenu-wrapper .sidemenu-content {
  background-color: var(--white-color);
  width: 450px;
  margin-left: auto;
  padding: 80px 30px;
  height: 100%;
  overflow: scroll;
  position: relative;
  right: 0;
  cursor: auto;
  transition-delay: 1s;
  transition: transform ease 1s;
  transform: translateX(100%);
}
.sidemenu-wrapper .sidemenu-content::-webkit-scrollbar-track {
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1);
  background-color: #F5F5F5;
}
.sidemenu-wrapper .sidemenu-content::-webkit-scrollbar {
  width: 2px;
  background-color: #F5F5F5;
}
.sidemenu-wrapper .widget {
  padding: 0;
  border: none;
  background-color: transparent;
}
.sidemenu-wrapper.show {
  opacity: 1;
  visibility: visible;
  width: 100%;
  transition: all ease 0.8s;
}
.sidemenu-wrapper.show .sidemenu-content {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

Думаю, может, вообще на CSS открытие и закрытие переписать. Пробовал добавить defer где подключен скрипт и async. Не помогло. stopImmediatePropagation() метод такой же почти, только не на дочерние элементы, а на все распространяется, как я понял.

Вернуться на верх