如何使用JavaScript定位父元素的同级元素？

你的代码核心问题是错误调用了.target属性——childElement、parentElement都是DOM元素，不存在.target属性（这是事件对象独有的属性）。另外，查找.target元素时，.closest()用于查找当前元素或其祖先元素，而.target是parent的直接子元素，应该用querySelector来定位。

修正后的代码 #

function clicks(event) {
    // 仅处理按钮的点击事件
    if (!event.target.matches('button')) return;
    
    // 找到按钮所在的.child容器
    const childElement = event.target.closest(".child");
    // 找到父容器.parent（直接取父元素更高效）
    const parentElement = childElement.parentElement;
    // 在parent容器内定位.target元素
    const targetElement = parentElement.querySelector(".target");
    
    targetElement.style.display = "none";
}

document.addEventListener('click', clicks);

更简洁的写法 #

如果DOM结构固定，可简化查找步骤：

function clicks(event) {
    if (!event.target.matches('button')) return;
    
    const targetElement = event.target.closest(".parent").querySelector(".target");
    targetElement.style.display = "none";
}

document.addEventListener('click', clicks);

额外说明 #

这种写法支持页面存在多个相同结构的parent容器，会基于点击的按钮向上定位对应的父容器，不会误操作其他容器内的.target元素。

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