javascript - 如何在 NodeList 中添加新创建的元素？

Question

我正在用 HTML、CSS 和 JavaScript 制作一个 ToDo 应用程序。

我在每个列表项前面添加了一个符号，这样当单击时，它会删除列表项。

问题是当我尝试删除预先添加的列表项时，它工作得很好，但是当我添加一个列表项然后删除它时，它不起作用:(

看看我的代码：

const toDoInput = document.querySelector("input");
const addButton = document.querySelector("button");
const listParent = document.querySelector("ul");
const removeLists = document.querySelectorAll(".remove-li");

const listItemMake = () => {
  if (toDoInput.value !== "") {
    const newDiv = document.createElement("div");
    newDiv.classList.add("list-item");
    const newListItem = document.createElement("li");
    newListItem.append(toDoInput.value);
    newDiv.append(newListItem);
    toDoInput.value = "";
    const newSpan = document.createElement("span");
    newSpan.classList.add("remove-li");
    newSpan.innerHTML = '(Remove Button)';
    newDiv.append(newSpan);
    listParent.append(newDiv);
  }
};

addButton.addEventListener("click", () => {
  listItemMake();
});

toDoInput.addEventListener("keydown", (event) => {
  if (event.code === "Enter") {
    listItemMake();
  }
});

for (const removeList of removeLists) {
  removeList.addEventListener("click", () => {
    removeList.parentElement.remove();
  })
}

<h1>ToDo Application</h1>
<div class="container">
  <div class="form-container">
    <input type="text" placeholder="Add New Tasks">
    <button>Add</button>
  </div>
  <div class="list-container">
    <ul>
      <div class="list-item">
        <li>Sample List Item</li>
        <span class="remove-li">(Remove Button)</span>
      </div>
      <div class="list-item">
        <li>Sample List Item</li>
        <span class="remove-li">(Remove Button)</span>
      </div>
      <div class="list-item">
        <li>Sample List Item</li>
        <span class="remove-li">(Remove Button)</span>
      </div>
    </ul>
  </div>
</div>

当我尝试自己在 Chrome 开发工具中解决此问题时，我意识到我新创建list-item的确实包含remove-list按钮，但该remove-list按钮从未添加到remove-lists列表中。我删除列表项的整个功能都是基于的remove-list，因此它不起作用。虽然，我不知道如何在列表中添加该元素。

另外，我真的不知道我在前 4 行声明的列表的名称。究竟是什么toDoInput（在第 1 行声明）？我不认为它是一个数组，因为虽然我可以迭代它，但我不能真正使用push&之类的方法pop。这个术语到底是什么，有什么区别？

帮助赞赏:)

标签： javascripthtml

Answer 1

您需要在新添加的元素上侦听单击事件。因此在将newSpan元素添加到 DOM 后，在它上添加了一个点击监听器。

您只监听 removeLists 元素的事件，但是当您在 DOM 中添加新元素时，新元素没有单击事件。因此，我们必须明确地监听事件。

我希望，它回答了你的问题。:)

const toDoInput = document.querySelector("input");
const addButton = document.querySelector("button");
const listParent = document.querySelector("ul");
const removeLists = document.querySelectorAll(".remove-li");

const listItemMake = () => {
  if (toDoInput.value !== "") {
    const newDiv = document.createElement("div");
    newDiv.classList.add("list-item");
    const newListItem = document.createElement("li");
    newListItem.append(toDoInput.value);
    newDiv.append(newListItem);
    toDoInput.value = "";
    const newSpan = document.createElement("span");
    newSpan.classList.add("remove-li");
    newSpan.innerHTML = '(Remove Button)';
    newDiv.append(newSpan);
    listParent.append(newDiv);
    newSpan.addEventListener("click", () => {
      newSpan.parentElement.remove();
    });
  }
};

addButton.addEventListener("click", () => {
  listItemMake();
});

toDoInput.addEventListener("keydown", (event) => {
  if (event.code === "Enter") {
    listItemMake();
  }
});

for (const removeList of removeLists) {
  removeList.addEventListener("click", () => {
    removeList.parentElement.remove();
  })
}

<h1>ToDo Application</h1>
<div class="container">
  <div class="form-container">
    <input type="text" placeholder="Add New Tasks">
    <button>Add</button>
  </div>
  <div class="list-container">
    <ul>
      <div class="list-item">
        <li>Sample List Item</li>
        <span class="remove-li">(Remove Button)</span>
      </div>
      <div class="list-item">
        <li>Sample List Item</li>
        <span class="remove-li">(Remove Button)</span>
      </div>
      <div class="list-item">
        <li>Sample List Item</li>
        <span class="remove-li">(Remove Button)</span>
      </div>
    </ul>
  </div>
</div>