js模態彈出值被堆疊

Question

我想在用戶單擊按鈕時顯示模式彈出窗口，但它不斷添加到 innerHTML

        <div class="popup-container hide">
            <div class="popup-wrapper">
                <!-- <div class="popup-content"> -->
                    
                <!-- </div> -->
                <div class="order-container">
                    <div class="value-container">
                        <button class="minusBtn"><img src="icon/minus.png" alt="" width="30px"></button>
                        <div class="value">1</div>
                        <button class="plusBtn"><img src="icon/plus.png" alt="" width="30px"></button>
                    </div>
                    <button class="orderBtn">Add To Cart</button>
                </div>
            </div>
        </div>

在這里，我創建了一個新的div並將其插入到父級中，並使用文字模板顯示單擊的數據

            let content = document.createElement('div');
                content.classList.add('popup-content');
                content.innerHTML = `
                <div class="popup-image">
                        <img src="mcd/${item.img}" alt="">
                    </div>
                    <div class="popup-name">
                        ${item.name}
                    </div>
                    <div class="popup-price">
                        ${item.price}
                    </div>
                `;
                let wrapper = document.querySelector('.popup-wrapper');
                let orderContainer = document.querySelector('.order-container');
                wrapper.insertBefore(content, orderContainer);

Answer 1

如果您只想顯示一個，則需要先刪除所有現有的.popup-content元素，然后再插入一個新元素。

document.querySelectorAll('.popup-content').forEach(el => el.remove());

let content = document.createElement('div');
...