Удаление определенного элемента массива по нажатию на кнопку

Question

Есть карточки, каждая карточка это элемент массива, в каждой карточке есть кнопка которая должна удалять этот элемент из массива, у каждой карточки есть айди заданный через html, многое перепробовал, но в итоге ничего, можете помочь?

HTML
<div class="cart-page__item" id="1">
   <button class="cart-page__item__delete"></button>
   <button class="cart-page__item__delete cart-page__item__delete_m"></button>
</div>
<div class="cart-page__item" id="2">
   <button class="cart-page__item__delete"></button>
   <button class="cart-page__item__delete cart-page__item__delete_m"></button>
</div>

JS
const cartPageItemDeleteBtn = document.querySelectorAll('.cart-page__item__delete');
cartPageItemDeleteBtn.forEach(btn => {
    const cartPageItemArr = Array.from(cartPageItem);
    btn.addEventListener('click', () => {
        const cartItem = btn.closest('.cart-page__item');
        for (let i = 0; i < cartPageItemArr.length; i++) {
            let cartId = cartItem.id;
            if(cartId === cartPageItemArr[i].id) {
                console.log(cartPageItemArr.length);
                cartPageItemArr.splice(0, 1);   
                console.log(cartPageItemArr.length);
            }   
        }
    });
});

Answer 1

Проблема в строчке :

cartPageItemArr.splice(0, 1);

Вы всегда удаляете первый элемент массива. А вам необходимо удалять тот элемент, который совпал по условию:

cartPageItemArr.splice(i, 1);

Answer 2

Вот тут:

const cartPageItemArr = Array.from(cartPageItem);

вы создаёте копию. И что бы вы с ней не делали, оригинал не изменится.

Основной вопрос теперь в том, что же такое cartPageItem.

Если массив, то удаление выглядит как:

const index = cartPageItem.findIndex(el => el.id === cartItem.id);
cartPageItem.splice(i, 1);

Если NodeList, то действия те же, но удаление из DOM:

const index = [...cartPageItem].findIndex(el => el.id === cartItem.id);
cartPageItem[index].parentNode.removeChild(cartPageItem[index]);

Во втором случае, так как мы знаем, где находится кнопка, можно найти контейнер от неё:

const item = btn.parentNode;
item.parentNode.removeChild(item);

Итого

Удаление из копии массива

const cartPageItem = document.querySelectorAll('.cart-page__item');
const cartPageItemDeleteBtn = document.querySelectorAll('.cart-page__item__delete');
cartPageItemDeleteBtn.forEach(btn => {
    const cartPageItemArr = Array.from(cartPageItem);
    btn.addEventListener('click', () => {
        const cartItem = btn.closest('.cart-page__item');
        let index = cartPageItemArr.indexOf(cartItem);
        console.log('before', cartPageItemArr.length, cartPageItemArr);
        cartPageItemArr.splice(index, 1);
        console.log('after', cartPageItemArr.length, cartPageItemArr);
    });
});

<div class="cart-page__item" id="1">
   <button class="cart-page__item__delete">x</button>
   <button class="cart-page__item__delete cart-page__item__delete_m">xm</button>
</div>
<div class="cart-page__item" id="2">
   <button class="cart-page__item__delete">x</button>
   <button class="cart-page__item__delete cart-page__item__delete_m">xm</button>
</div>

Удаление из DOM

const cartPageItemDeleteBtn = document.querySelectorAll('.cart-page__item__delete');
cartPageItemDeleteBtn.forEach(btn => {
    btn.addEventListener('click', () => {
        const cartItem = btn.closest('.cart-page__item');
        cartItem.parentNode.removeChild(cartItem);
    });
});

<div class="cart-page__item" id="1">
   <button class="cart-page__item__delete">x</button>
   <button class="cart-page__item__delete cart-page__item__delete_m">xm</button>
</div>
<div class="cart-page__item" id="2">
   <button class="cart-page__item__delete">x</button>
   <button class="cart-page__item__delete cart-page__item__delete_m">xm</button>
</div>

БЛОГ НА HUSL

Удаление определенного элемента массива по нажатию на кнопку

Ответы (2 шт):

Итого

Удаление из копии массива

Удаление из DOM