模板组件从数组中移除时不会重新渲染

Question

当我在点击时附加模板时一切正常。但是，当删除事件触发时，它会从数组中删除它。它会从数组中删除它，但是当我单击以将其附加回数组时，会触发错误。无法在 HTMLButtonElement 处读取 null 的属性“内容”。我已经仔细检查了我的 Html，这似乎很好。我不知道为什么它已经被推入数组然后被删除后不会重新附加或重新渲染。

// 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);
            }

Answer 1

我想通了。我从 else 语句中删除了原始菜单模板。每次单击按钮时，我都会删除模型模板，因此它无法重新渲染为空。