JavaScript Modal加载动态数据异常：打开新模态框后旧内容残留

问题根因 #

你每次渲染弹窗内容时调用的是appendChild()方法，这个方法只会在目标容器末尾追加新节点，不会清空之前已经存在的旧内容。关闭弹窗默认只是隐藏弹窗DOM，不会自动清空容器内部的子节点，所以多次打开不同数据的弹窗就会出现内容叠加的情况。

修复方案 #

只需要在往itemDiv中插入新内容之前，先清空容器里的旧内容即可，修改后的JS代码如下：

const itemDiv = document.getElementById('details-single');
const displayItem = item => {
    // 新增这一行：先清空容器内的所有旧内容
    itemDiv.innerHTML = '';
    const div = document.createElement('div');
    div.innerHTML = `
            <div class="modal-header">
                <img class="product-image" src=${item.image}></img>
                <h5 class="modal-title">${item.title}</h5>
                <button class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                ${item.description}
            </div>
            <div class="modal-footer">
                <button id="close" class="details" data-dismiss="modal">Close</button>
                <button onclick="addToCart(${item.id},${item.price})" id="addToCart-btn" 
                 class="add-btn">Add to Cart</button>
            </div>
  `;
    itemDiv.appendChild(div);
};

补充优化建议 #

• 当前代码存在重复ID的问题：close和addToCart-btn这两个ID每次渲染都会重复生成，同一页面内ID不能重复，建议修改为类名，或者拼接上item.id生成唯一ID避免冲突。
• 如果你的弹窗组件有提供关闭后的钩子回调，也可以选择在弹窗关闭回调里执行清空容器的操作，两种方案都可以生效。

内容的提问来源于stack exchange，提问作者Rayhan Sheikh