点击模态框删除动态添加项：传递触发元素的问题

问题场景 #

点击列表项中的<i class="fa-solid fa-ellipsis"></i>按钮弹出删除模态框，点击模态框的.delete按钮时，需要删除触发模态框的对应动态列表项，但无法将触发元素传递给deletePost函数。

现有代码问题分析 #

1. 模态框获取错误：showOptions中用object.target.querySelector(".optionsModal")无法找到模态框，因为模态框不在按钮的DOM层级内。
2. 事件绑定语法错误：addEventListener第二个参数应该传函数引用，而不是直接调用函数并传event。
3. 缺少触发元素的存储：没有记录点击的是哪个列表项，导致删除时无法定位目标。

修正后的实现代码 #

HTML（保持原结构无需改动）

<body>
  <ul class="posts-list">
    <li class="posts-list-item">
      <div class="post">
        <div class="post-option">
          <i class="fa-solid fa-ellipsis"></i>
        </div>
      </div>
    </li>
    <li class="posts-list-item">
      <div class="post">
        <div class="post-option">
          <i class="fa-solid fa-ellipsis"></i>
        </div>
      </div>
    </li>
    <!-- 动态添加的li item -->
  </ul>

  <div class="optionsModal hide">
    <p class="delete">Delete</p>
    <p class="cancel">Cancel</p>
  </div>
</body>

JavaScript

// 存储当前要操作的列表项
let currentTargetItem = null;

function showOptions(event) {
  // 只处理点击省略号按钮的情况
  if (event.target.matches(".fa-ellipsis")) {
    // 向上遍历DOM找到对应的列表项
    currentTargetItem = event.target.closest(".posts-list-item");
    // 获取全局模态框并切换显示状态
    const optionsModal = document.querySelector(".optionsModal");
    optionsModal.classList.toggle("hide");
  }
  // 点击取消按钮时隐藏模态框并重置当前项
  if (event.target.matches(".cancel")) {
    document.querySelector(".optionsModal").classList.add("hide");
    currentTargetItem = null;
  }
}

function deletePost() {
  // 确认存在要删除的项
  if (currentTargetItem) {
    currentTargetItem.remove();
    // 隐藏模态框并重置当前项
    document.querySelector(".optionsModal").classList.add("hide");
    currentTargetItem = null;
  }
}

// 修正事件绑定：传递函数引用而非直接调用
document.querySelector("body").addEventListener("click", showOptions);
document.querySelector(".delete").addEventListener("click", deletePost);

关键改动说明 #

• 存储当前目标项：点击省略号按钮时，用closest(".posts-list-item")向上定位到对应的列表项，存入全局变量。
• 修正模态框获取逻辑：直接通过全局选择器获取模态框，避免DOM层级查找错误。
• 修复事件绑定语法：addEventListener第二个参数改为函数引用，而非调用函数。
• 兼容动态列表：借助事件委托（绑定在body上），动态添加的列表项的省略号按钮也能正常触发事件，无需额外绑定。
• 完善模态框交互：点击取消按钮时重置状态，避免后续误操作。

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