Как измерить длину псевдомассива при ее уменьшении, Java Script

Рейтинг: -2Ответов: 1Опубликовано: 17.01.2023

Нужно измерить длину псевдомассива каждый раз при удалении элементов из него и добавить это значение на страницу. То есть каждый раз при удалении элемента, счетчик на странице должен уменьшаться на 1.

        <div class="favorites-list-item">
                    <img src="/img/item-thumb01.png" alt="" class="item-thumb">
                    <div class="item-content">
                        <h2>Favorite dish</h2>
                        <p class="item-excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                            eiusmod tempor incididunt. </p>
                        <div class="item-remove"><span></span></div>
                    </div>
                </div>
                <div class="favorites-list-item">
                    <img src="/img/item-thumb02.png" alt="" class="item-thumb">
                    <div class="item-content">
                        <h2>Favorite dish</h2>
                        <p class="item-excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                            eiusmod tempor incididunt. </p>
                        <div class="item-remove"><span></span></div>
                    </div>
                </div>




 let itemRemoveBtn = document.querySelectorAll('.item-remove'),
    favoritItem = document.querySelectorAll('.favorites-list-item'),
    itemList = document.querySelector('.favorites-list');

    function deleteItem(i) {
        favoritItem[i].classList.add('hide');
    }


itemList.addEventListener('click', (e)=>{
    let target = e.target;
    if(target.classList.contains('item-remove')){
        itemRemoveBtn.forEach((item, i)=>{
            if(target == item) {
                deleteItem(i);
            }
        });
    }
});

введите сюда описание изображения

Ответы

▲ 1Принят

Так как количество элементов в DOM не меняется, достаточно завести счетчик, который изменять внутри deleteItem;

let visibleCount = favoritItem.length;

Тогда вы при вызове deleteItem достаточно просто уменьшить это число

function deleteItem(i) {
    favoritItem[i].classList.add('hide');
    visibleCount -= 1;
}