JavaScript中移除元素时事件委托未按预期工作

问题描述 #

尝试用事件委托处理动态添加DOM元素的点击事件：容器.experience-cont内的.garbage-btn按钮被点击时，移除它的祖父元素；点击Add按钮时，克隆.hidden元素并添加到#experienceResult中。

使用的JavaScript代码：

let experienceCont = document.getElementsByClassName("experience-cont")[0];
let resultCont = document.getElementById("experienceResult");
experienceCont.addEventListener("click", (e) => {
    if(e.target && e.target.classList.contains("garbage-btn")){
        let removeEle = e.target.parentNode.parentNode;
        console.log("remove");
        resultCont.removeChild(removeEle);
    }
    else if(e.target && e.target.value === "Add"){
        let ele = document.getElementsByClassName("hidden")[0];
        console.log("add");
        resultCont.appendChild(ele.cloneNode(true));
    }
});

对应的HTML结构：

<div class="form-cont experience-cont accordion-cont">
    <div class="static-form-cont">
        <div class="title-cont"><span class="text">Experience</span></div>
        <div class="accordion-btn"><img src="../arrow-down-sign-to-navigate.png" alt="arrown btn"></div>
    </div>
    <label><input type="submit" value="Add" id="experienceBtn"></label>
    <div class="experience-result" id="experienceResult">
        <div class="hidden">
            <div class="static-form-cont">
                <div class="garbage-btn"><img src="../trash.png" alt="delete btn"></div>
                <div class="title-cont"><span class="text"></span></div>
                <div class="accordion-btn"><img src="../arrow-down-sign-to-navigate.png" alt="arrown btn"></div>
            </div>
            <!-- More HTML here... -->
        </div>
    </div>
</div>

问题：点击.garbage-btn按钮时无法移除祖父元素，事件监听器已触发但无后续逻辑执行，控制台无报错。

问题原因 #

点击操作实际触发在.garbage-btn内部的<img>元素上，此时e.target指向的是<img>而非外层的.garbage-btndiv，导致e.target.classList.contains("garbage-btn")判断不成立，移除逻辑无法执行。

修复方案 #

方案1：使用closest()方法匹配祖先元素（推荐） #

利用Element.closest()向上查找最近的匹配选择器的元素，无论点击的是按钮内部的img还是按钮本身，都能正确定位到.garbage-btn，同时直接用remove()方法移除目标元素，无需依赖父容器：

experienceCont.addEventListener("click", (e) => {
    const garbageBtn = e.target.closest(".garbage-btn");
    if(garbageBtn){
        const removeEle = garbageBtn.parentNode.parentNode;
        console.log("remove");
        removeEle.remove();
    }
    else if(e.target.value === "Add"){
        const ele = document.querySelector(".hidden");
        console.log("add");
        resultCont.appendChild(ele.cloneNode(true));
    }
});

注：closest()会从当前元素开始向上遍历DOM树，返回第一个匹配选择器的元素，兼容性良好（IE除外）。

方案2：将类名移到内部img元素 #

如用户自行发现的方法，把garbage-btn类从外层div移到内部img上，确保点击目标直接匹配类名：

<div><img class="garbage-btn" src="../trash.png" alt="delete btn"></div>

此方法简单直接，但如果后续按钮结构变化（比如添加其他子元素），可能再次出现同样问题，灵活性不如方案1。

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