如何在jQuery中正确获取父元素的ID？

现有代码无法正确获取目标父元素ID，是两个问题共同导致的：

• 内联onclick绑定的全局函数执行时，函数内部的this默认指向全局window对象，并非触发点击的按钮元素，导致从window节点开始查找DOM，无法匹配到任何div元素，最终获取的id值为undefined。
• 就算修正了this的指向，由于触发点击的.preview-remove元素本身就是div，closest('div')会优先匹配到元素自身（也就是id为prv-rmv的按钮节点），而非预期的外层容器prv-img，不符合需求。

补充说明：closest()方法的匹配逻辑是从当前元素自身开始，向上逐层匹配第一个符合选择器的节点。如果直接写closest('div')，由于触发元素本身就是div，会直接匹配到自己的id，无法获取外层父容器的ID，因此需要把选择器替换为更精准的类名或层级选择器，才能匹配到预期的目标节点。

方案1：内联绑定传入触发元素上下文 #

修改函数入参，在触发时把当前点击元素作为参数传入，避免this指向错误；同时调整选择器精准匹配目标父元素：

function checkID(triggerEl) {
  // 精准匹配带preview-image类的父容器，避免匹配到自身
  const targetParentId = $(triggerEl).closest('.preview-image').attr('id');
  alert(targetParentId);
}

对应修改HTML的触发绑定：

<div class="preview-remove" data-name="${fileName}" onclick="checkID(this)" id="prv-rmv">&times;</div>

执行后即可正确获取外层容器的prv-img ID。

方案2：使用jQuery事件绑定替代内联onclick #

移除HTML上的内联onclick属性，通过jQuery统一绑定事件，事件回调内的this会自动指向被点击的元素，从根源上避免this指向问题：

// DOM加载完成后执行绑定
$(function() {
  $('.preview-remove').on('click', function() {
    // this天然指向当前被点击的按钮元素
    const targetParentId = $(this).closest('.preview-image').attr('id');
    alert(targetParentId);
  })
})

内容的提问来源于stack exchange，提问作者Анастасия Стрелецкая