Template Component doesn't re-render when it is removed from array

Everything works fine when I append the template onclick. However when the remove events fire it deletes it from the array. It deletes it from the array but when I go to click to append it back to the array, an error fires off. Cannot read property ‘content’ of null at HTMLButtonElement.. I’ve double checked my Html and that seems fine. I don’t know why it won’t re-append or re-render after it was already pushed into the array and then deleted.

// Function to remove item from array onClick
function removeItem(shoppingItems, btns) {

    btns.addEventListener('click', (e) => {
        let newArr = shoppingItems.filter(item => item.id !== item.id)

        shoppingList = newArr
        cartMenuItems.innerHTML = newArr
        cartItemCount.innerText = newArr.length
        return newArr
    })
}

// Template Component
btn.addEventListener('click', (e) => {

            if (shoppingList.indexOf(cartItem) !== -1) {
                return
            }
            else {
                const menuTemplate = document.querySelector('#menu-template').content
                const copyMenuTemplate = document.importNode(menuTemplate, true);
                copyMenuTemplate.querySelector('.menu-item-title').textContent = cartItem.title;
                copyMenuTemplate.querySelector('.menu-price').textContent = cartItem.price;
                copyMenuTemplate.querySelector('.menu-img').src = cartItem.image;
                const removeBtn = copyMenuTemplate.querySelector('.remove-btn')
                cartMenuItems.appendChild(copyMenuTemplate);
                shoppingList.push(cartItem)
                cartItemCount.innerText = shoppingList.length;
                removeItem(shoppingList, removeBtn);
            }

64 thoughts on “Template Component doesn't re-render when it is removed from array”

Leave a Comment