点击获取父元素ID的正确方法

问题根源在于：你将 onclick="del(this.id)" 写在 标签内，此时 this 指向的是 按钮自身（ 元素），而 ID 实际设置在它的父元素

上。按钮元素本身没有 id 属性，因此 this.id 恒为 undefined。

✅ 正确做法是：在 del() 函数中，通过 event.target（或传入的按钮元素）向上查找其父级

，再获取其 id：

function del(target) {
  const listItem = target.parentElement; // 获取直接父元素（即 <li>）
  console.log('关联任务ID:', listItem.id); // ✅ 正确输出如 "item0", "item1" 等
  // 后续可执行删除逻辑：listItem.remove();
}

同时，需同步更新 HTML 中的内联调用，移除 .id，仅传入 this（按钮元素）：

<!-- 错误写法（导致 undefined） -->
<button class="deletebutton" onclick="del(this.id)">?</button>

<!-- 正确写法 -->
<button class="deletebutton" onclick="del(this)">?</button>

⚠️ 注意事项：

• parentElement 是安全选择（相比 parentNode），它只返回元素节点，避免文本节点干扰；
• 若
• 内存在嵌套结构（如 包裹文字），建议使用 target.closest('.listItem') 更健壮：

  function del(target) {
    const listItem = target.closest('.listItem');
    if (listItem && listItem.id) {
      console.log('任务ID:', listItem.id);
      listItem.remove(); // 示例：直接删除整项
    }
  }

• 避免频繁使用内联 onclick：它耦合 HTML 与 JS，且无法动态绑定新生成元素的事件。推荐采用事件委托（推荐进阶实践）：

// 在 add() 函数外统一监听（一次绑定，永久生效）
document.getElementById("list").addEventListener('click', function(e) {
  if (e.target.classList.contains('deletebutton')) {
    const listItem = e.target.closest('.listItem');
    if (listItem) {
      console.log('删除项ID:', listItem.id);
      listItem.remove();
    }
  }
});

✅ 总结：
undefined 不是 ID 创建失败，而是作用对象错位。牢记 “按钮无ID，父项才有ID”，善用 parentElement 或 closest() 定位目标元素。优先采用事件委托替代内联 onclick，提升代码可维护性与动态兼容性。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《点击获取父元素ID的正确方法》文章吧，也可关注golang学习网公众号了解相关技术文章。

您即将跳转至第三方网站，请注意保护好个人信息和财产安全！

继续访问