本文介绍一种简洁可靠的方案：利用 css 类标记被选中的操作目标，再在删除事件中定位并移除其所属的 `

` 列表项，从而实现对动态添加内容的精准删除。

在处理动态生成的 DOM 元素（如通过 JavaScript 追加的 <li>）时，直接为每个元素单独绑定事件监听器既低效又难以维护。更优解是采用事件委托 + 状态标记策略：当用户点击某个 fa-ellipsis 按钮时，不立即执行删除，而是将该按钮标记为“当前选中”，再在模态框的「删除」按钮点击时，根据此标记定位并移除对应列表项。

✅ 正确实现步骤

1. 点击省略号图标时：

   • 显示全局模态框（.optionsModal），而非依赖 object.target.querySelector()（因模态框不在图标子树中）；
   • 清除之前可能存在的 .selected 标记；
   • 给当前点击的 <i> 元素添加 .selected 类，作为后续删除操作的锚点。

2. 点击「Delete」时：

   

   Comprehensive Three.js 3D graphics reference

   详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

   下载
   • 查找带有 .selected 的 <i> 元素；
   • 使用 closest(".posts-list-item") 向上查找最近的父级列表项；
   • 调用 .remove() 安全移除整条 <li>。

以下是完整可运行的代码示例：

<style>
  .selected { background-color: #ffeb3b; }
  .hide { display: none; }
  .optionsModal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1000;
  }
  .optionsModal.hide { display: none; }
</style>

<ul class="posts-list">
  <li class="posts-list-item">
    <div class="post">
      <div class="post-option">
        <i class="fa-solid fa-ellipsis">Post #1</i>
      </div>
    </div>
  </li>
  <li class="posts-list-item">
    <div class="post">
      <div class="post-option">
        <i class="fa-solid fa-ellipsis">Post #2</i>
      </div>
    </div>
  </li>
</ul>

<div class="optionsModal hide">
  <p class="delete">?️ Delete</p>
  <p class="cancel">✖ Cancel</p>
</div>

<script>
function showOptions(event) {
  if (event.target.matches(".fa-ellipsis")) {
    const optionsModal = document.querySelector(".optionsModal");
    optionsModal.classList.remove("hide");

    // 清理旧选中状态
    const oldSelected = document.querySelector(".selected");
    if (oldSelected) oldSelected.classList.remove("selected");

    // 标记当前点击项
    event.target.classList.add("selected");
  }
}

function deletePost() {
  const selectedIcon = document.querySelector(".selected");
  if (selectedIcon) {
    const listItem = selectedIcon.closest(".posts-list-item");
    if (listItem) listItem.remove();
  }

  // 隐藏模态框并清除状态
  document.querySelector(".optionsModal").classList.add("hide");
}

// ✅ 注意：addEventListener 中传入函数名，不要带括号和参数
document.body.addEventListener("click", showOptions);
document.querySelector(".delete").addEventListener("click", deletePost);

// 可选：点击 Cancel 或模态框外区域关闭
document.querySelector(".cancel").addEventListener("click", () => {
  document.querySelector(".optionsModal").classList.add("hide");
});
document.querySelector(".optionsModal").addEventListener("click", e => e.stopPropagation());
document.body.addEventListener("click", e => {
  if (e.target === document.querySelector(".optionsModal")) {
    document.querySelector(".optionsModal").classList.add("hide");
  }
});
</script>

⚠️ 关键注意事项

• 避免错误绑定：addEventListener("click", showOptions(event)) 是常见错误——这会立即执行函数并传入 undefined；应写为 showOptions（无括号）。
• 模态框需真正“模态”：建议添加遮罩层或阻止背景点击穿透，否则用户可能误点其他省略号导致状态混乱。
• 动态内容兼容性：本方案天然支持后续通过 JS 动态插入的新 <li>，无需重新绑定事件。
• 健壮性增强：closest() 方法确保即使 DOM 结构微调（如多一层嵌套），仍能准确定位列表项。

该方法逻辑清晰、无内存泄漏风险，是处理动态列表交互的推荐实践。