Как удалить элемент из списка, созданного пользователем (корзина) - PullRequest
Новая
       53

Как удалить элемент из списка, созданного пользователем (корзина)

0 голосов
/ 10 июля 2020 
const cartContent = document.querySelector(".cart_content");
.
.
.
addCartItem(item) {
const div = document.createElement('div');
div.classList.add('cart_item');
div.innerHTML = `
    <div class="shop_cart_items_wrapper">
        <span class="remove_item" data-id=${item.id}><i class="fas fa-times"></i></span>
    <div class="shop_cart_items">
        <p class="item_amount">${item.amount}</p>
        <span class="cart_title_text_wrapper"><h4 class="cart_title_text">${item.title}</h4></span>  
        <span class="cart_price_amount_wrapper"><h5 class="cart_price_amount">$${item.price}</h5></span>
    </div>
    <div>
        <div class="inc_dec_amounts_cart">
            <i class="fas fa-chevron-up" data-id=${item.id}></i>
            <i class="fas fa-chevron-down" data-id=${item.id}></i>
        </div>
    </div>
</div>`;
            cartContent.appendChild(div);
}
.
.
.
cartContent.addEventListener("click", event => {
       if (event.target.classList.contains("remove_item")) {
        let removeItem = event.target;
        let id = removeItem.dataset.id;
        cartContent.removeChild.firstElementChild(removeItem.parentElement.parentElement);
        this.removeItem(id);
       }

Итак, у меня есть все необходимое для работы кода. Я хочу, чтобы весь товар был удален из корзины, когда я нажимаю значок «раз». Я думаю, что removeItem.parentElement.parentElement не нацелен на значок времени. Что мне нужно сделать, чтобы он нацелился на значок времени и закрыл cart_item div?

1 Ответ

0 голосов
/ 10 июля 2020

Похоже, вы пытаетесь удалить элемент относительно того, где определен класс remove_item (который, как я предполагаю, может быть значок X или что-то в этом роде. Лучше всего просто определить идентификатор родительского сам элемент, найдя этот элемент через document.querySelector, а затем удалив его.

Итак, вместо того, чтобы иметь что-то вроде этого 

const div = document.createElement('div');
div.classList.add('cart_item');
div.setAttribute('data-item-id', item.id); // <-- now the cart_item has an id associated to it
div.innerHTML = `
    <div class="shop_cart_items_wrapper">
        <span class="remove_item" data-id=${item.id}><i class="fas fa-times"></i></span>
    <div class="shop_cart_items">

И тогда ваша функция удаления становится 

cartContent.addEventListener("click", event => {
       if (event.target.classList.contains("remove_item")) {
        let removeItem = event.target;
        let id = removeItem.dataset.id;
        cartContent.removeChild(document.querySelector(`[data-item-id=${id}`));
        this.removeItem(id);
       }

Или что-то в этом роде. Если вы ищете конкретный c ответ о том, как получить это относительно с помощью вашего метода, это возможно, но это просто дает вам другой способ решения проблемы.

...