js模态弹出值被堆叠

Question

I want to show a modal popup when the user clicked a button, but it keeps adding to the 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>

Here I create a new div and insert it into the parent, and showing the clicked data with literal template

            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

You need to remove all existing .popup-content elements before you insert a new one if you want only one to appear.

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

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