多个同ID的DOM元素如何实现点击仅删除当前被点击元素？

你当前的代码存在两个直接导致删除错位的问题：

• 所有评论<p>标签都使用了相同的id individualComment，HTML标准中id是全局唯一标识，重复id调用getElementById时永远只会返回页面中第一个匹配的元素，这就是你点任何评论都按固定顺序删除的根本原因
• 点击事件触发后没有直接使用事件对应的触发节点，反而再次通过id查询DOM，进一步放大了重复id的缺陷

完全不需要通过循环拼接数字后缀维护唯一id，这套逻辑不仅冗余，在评论频繁增删的场景下很容易出现id重复、计数错乱的问题。直接利用事件委托+事件对象即可精准定位点击目标，零额外id维护成本：

1. 将评论、点赞按钮上重复的固定id替换为可复用的class，符合HTML语义规范
2. 点击事件触发时，直接通过事件对象e.target定位点击源，用closest()方法向上匹配所属的评论节点，兼容点击到评论内子元素（比如点赞按钮）的场景
3. 直接对匹配到的当前评论节点执行删除操作，不需要额外查询DOM

修改后的完整代码 #

评论创建逻辑 #

const createComment = () => {
    let userId = "userId"
    const comment = textbox.value;
    const element = document.createElement('p');
    // 替换重复id为通用class
    element.className = "individualComment";
    element.setAttribute("style", "width:430px");
    
    const like = document.createElement("input");
    // 点赞按钮同样替换重复id为class
    like.className = "like-btn";
    like.src = "img/navHeart.jpeg";
    like.type = "image"
    like.setAttribute("style", "height: 15px; width: 15px");
    like.style.float = 'right';

    element.innerHTML = userId + "  " + comment;
    whereToAdd.appendChild(element);
    element.append(like);
}

点击删除逻辑 #

document.body.addEventListener('click', function (e) {
    // 从点击位置向上查找最近的评论节点，兼容点击点赞按钮、评论文本的场景
    const currentComment = e.target.closest('.individualComment');
    if (currentComment) {
        // 直接删除当前定位到的评论，不会影响其他节点
        currentComment.remove();
    }
})

方案说明：closest()方法会从当前点击的元素开始，逐级向上查找匹配选择器的祖先元素，直到找到匹配节点为止。哪怕后续你在评论里加回复按钮、举报按钮等其他子元素，这个逻辑都能精准定位到所属的评论根节点，不管新增删除多少条评论都不需要额外维护标识，逻辑非常稳定。

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