JS替换父元素最后子元素问题：代码无法限制子元素数量

核心问题 #

你的代码逻辑顺序错误，导致每次触发事件时都会新增div元素，无法替换旧的第二个iframe容器：

• 代码先执行wrapper.append(div)，将新div添加到容器末尾，此时容器子元素数量先增加；
• 随后判断childElementCount > 2时，执行replaceChild(div, wrapper.lastElementChild)——但此时wrapper.lastElementChild就是刚添加的新div，相当于把它替换成自己，完全没起到删除旧元素的作用；
• 重复触发事件时，子元素数量会持续累加。

修复后的代码 #

function compareSoundclips(e) {
    if (e.target.id !== "output-compare-2") return;

    const wrapper = document.querySelector("#iframe-container");

    if (!wrapper.classList.contains("grid-2")) {
        wrapper.classList.add("grid-2");
    }

    const div = document.createElement("div");
    div.innerHTML = `
<iframe
    width="100%"
    height="400"
    scrolling="yes"
    frameborder="no"
    style="height: 400px;"
    src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/${e.target.value}&color=%23ad9462&auto_play=false&hide_related=false&show_comments=false&show_user=false&show_reposts=false&show_teaser=false">
</iframe>
`;

    // 先判断子元素数量，再执行对应操作
    if (wrapper.childElementCount >= 2) {
        // 已有2个容器，替换最后一个
        wrapper.replaceChild(div, wrapper.lastElementChild);
    } else {
        // 仅初始容器，添加新元素
        wrapper.append(div);
    }
}

关键修改说明 #

1. 调整逻辑顺序：先检查容器子元素数量，再决定是添加还是替换：
   • 当容器已有2个子元素（包含初始的iframe容器），直接用新div替换最后一个子元素；
   • 当容器只有1个初始子元素时，才执行添加操作。
2. 结构一致性：确保初始的iframe已经被包裹在div中，和动态创建的结构完全一致，这样childElementCount的计数才准确。如果初始iframe没有外层div，需要先给它套一个div，否则会导致计数逻辑混乱。

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