通过单击模态删除动态添加的项目答案

【问题标题】：Delete dynamically added item by clicking on modal通过单击模态删除动态添加的项目
【发布时间】：2023-02-05 01:57:59
【问题描述】：

我正在尝试通过单击模式框上的删除按钮.delete 来删除动态添加的项目。我有一个模式，当我点击按钮 <i class="fa-solid fa-ellipsis"> 时它会弹出。

代码：

function showOptions(object) {
  if (object.target.matches(".fa-ellipsis")) {
    let optionsModal = object.target.querySelector(".optionsModal");

    optionsModal.classList.toggle("hide");
  }
}

function deletePost() {
  // delete specific li-item from the list 
}

document.querySelector("body").addEventListener("click", showOptions(event));
document.querySelector(".delete").addEventListener("click", deletePost);

<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>
    <!-- every li item is added dynamically -->
  </ul>

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

当我点击它们时，我有一个问题如何传递给deletePost 函数特定的<i class="fa-solid fa-ellipsis">。我试图将一个 eventListener 嵌套在另一个 eventListener 中，但它不起作用。

【问题讨论】：

标签： javascript html addeventlistener

【解决方案1】：

当您打开模式时，将一个类添加到您单击的项目。然后找到deletePost中的项目。

模态不在object.target里面，所以你不应该使用object.target.querySelector()来找到它，使用document.querySelector()。

单击列表项时不应切换 hide 类。如果您在取消模态之前单击不同的项目，这将隐藏模态（尽管如果您使其成为真正的模态，则您不应该能够点击其他东西）。我只是删除类以显示模态。

function showOptions(object) {
  if (object.target.matches(".fa-ellipsis")) {
    let optionsModal = document.querySelector(".optionsModal");
    optionsModal.classList.remove("hide");
    let oldSelected = document.querySelector(".selected");
    if (oldSelected) {
      oldSelected.classList.remove("selected");
    }
    object.target.classList.add("selected");
  }
}

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

document.querySelector("body").addEventListener("click", showOptions);
document.querySelector(".delete").addEventListener("click", deletePost);

.selected {
  background-color: red;
}

.hide {
  display: none;
}

<body>
  <ul class="posts-list">
    <li class="posts-list-item">
      <div class="post">
        <div class="post-option">
          <i class="fa-solid fa-ellipsis">Item 1</i>
        </div>
      </div>
    </li>
    <li class="posts-list-item">
      <div class="post">
        <div class="post-option">
          <i class="fa-solid fa-ellipsis">Item 2</i>
        </div>
      </div>
    </li>
    <!-- every li item is added dynamically -->
  </ul>

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

【讨论】：