点击删除按钮时event.currentTarget.parentNode.remove()无法移除父元素

我正在把jQuery实现的功能转成原生JS，遇到一个问题：点击删除按钮时，无法移除对应的父级div元素，event.currentTarget.parentNode.remove()代码完全不生效。相关代码如下：

<div class="row" id="showAward">

</div>
<div class="w-100 text-center">
    <a id="add" class="bg-primary text-white px-3 py-2 rounded-circle cursor-pointer">
        <i class="fa-solid fa-plus"></i>
    </a>
</div>

<script>
    let count = 0;

    document.addEventListener('click', function(event) {
        if (event.target.id === 'add') {
            count++;
            addAward(count);
        }
        if (event.target.classList.contains('delete')) {
            event.currentTarget.parentNode.remove();
        }
    });
    function addAward(number) {
        let html = `<div class="col-lg-4 mb-3 position-relative">
            <label for="image${number}" class="form-label">image ${number}</label>
            <input type="file" class="form-control" id="image${number}" name="image${number}">
            <a class="delete text-danger cursor-pointer position-absolute end-0 top-0"><i class="fa-solid fa-times"></i></a>
        </div>`;
        document.getElementById('showAward').insertAdjacentHTML('beforeend', html);
    }
</script>

问题原因分析 #

1. event.currentTarget指向错误：事件监听绑定在document上，所以event.currentTarget是document对象，它的parentNode为null，调用remove()自然无效。
2. 点击目标判断不准确：删除按钮内的<i>标签是实际点击的元素（event.target），但它没有delete类，导致classList.contains('delete')条件无法触发。

解决方案 #

修改事件处理逻辑，解决上述两个问题：

• 用element.closest('.delete')找到点击元素最近的带delete类的祖先元素，兼容点击图标或按钮本身的情况。
• 找到该按钮的父级目标div（.col-lg-4）并移除。

修正后的事件监听代码：

document.addEventListener('click', function(event) {
    if (event.target.id === 'add') {
        count++;
        addAward(count);
    }
    // 找到最近的.delete元素
    const deleteBtn = event.target.closest('.delete');
    if (deleteBtn) {
        // 移除对应的父级div
        deleteBtn.parentNode.remove();
    }
});

完整的修正后代码：

<div class="row" id="showAward">

</div>
<div class="w-100 text-center">
    <a id="add" class="bg-primary text-white px-3 py-2 rounded-circle cursor-pointer">
        <i class="fa-solid fa-plus"></i>
    </a>
</div>

<script>
    let count = 0;

    document.addEventListener('click', function(event) {
        if (event.target.id === 'add') {
            count++;
            addAward(count);
        }
        const deleteBtn = event.target.closest('.delete');
        if (deleteBtn) {
            deleteBtn.parentNode.remove();
        }
    });
    function addAward(number) {
        let html = `<div class="col-lg-4 mb-3 position-relative">
            <label for="image${number}" class="form-label">image ${number}</label>
            <input type="file" class="form-control" id="image${number}" name="image${number}">
            <a class="delete text-danger cursor-pointer position-absolute end-0 top-0"><i class="fa-solid fa-times"></i></a>
        </div>`;
        document.getElementById('showAward').insertAdjacentHTML('beforeend', html);
    }
</script>

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