尝试删除 JavaScript 中的元素时，事件委托未按预期工作

Question

当然，这里有一个关于如何在 Stack Overflow 上提出问题的建议：

---

标题：尝试删除 JavaScript 中的元素时，事件委托未按预期工作

身体：

我尝试在 JavaScript 中使用事件委托来处理动态添加到 DOM 的元素上的单击事件。我有一个类为“experience-cont”的容器元素，在该容器内，有类为“garbage-btn”的元素。我正在尝试设置一个事件侦听器，以便当单击“garbage-btn”时，其祖父母元素将从 DOM 中删除。

这是我正在使用的 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”时，我希望它的祖父元素从 DOM 中删除，但这并没有发生。控制台中没有错误消息，并且我已确认单击“garbage-btn”时会触发事件侦听器。

我尝试使用

removeChild()

和

remove()

来删除该元素，但都不起作用。我还尝试将事件侦听器附加到不同的元素并使用不同的方法来选择要删除的元素，但没有解决问题。

有谁知道可能导致此问题的原因以及如何解决它？

编辑 --- 问题在于应该单击事件的位置。我在垃圾 btn 内单击 img，所以我只是将类从 div 移至 img。

Answer 1

它不起作用，因为单击img标签上的目标，并且它没有类“garbage-btn”，您可以尝试单击外部图像，元素将被删除

您可以使用图标代替图像，或者在 img 标签中添加 onclick 事件来解决此问题