javascript - 待办事项 list 关闭按钮有问题

我有一些似乎有效的代码，但是有点奇怪。当我第一次刷新页面时，我的关闭按钮似乎工作正常，但是当我创建新的待办事项列表项时，关闭按钮似乎停止工作，我无法查明原因。

let addItem = document.getElementById("submitButton");
let userInput = document.getElementById("toDoInput");
let output = document.getElementById("output");
let toDoItem = document.querySelector(".toDoItem");
let close = document.querySelector(".close");
let toDo = document.querySelector(".todo");

/*User clicked the addItem Button
If there is any text inside the text field then add that text to the todo list */
addItem.addEventListener("click", addToDo);
function addToDo(){
  var html = `
  <ul class="todo">
      <li class="toDoItem">
        <p>${userInput.value}</p>
        <div class="close">X</div>
      </li>
  </ul>
  `;
output.innerHTML += html;
// Resetting input to blank once a submit button has been added.
userInput.value = '';
}


// Figure out how to make closing functionality simple this implementation
// isn't working
close.addEventListener("click", function(e){
  console.log("clicked");
  let x = e.target.parentElement;
  x.style.display = "none";
  e.preventDefault();
});

<header>
    <input type="text" placeholder="Enter Item Here..." id="toDoInput">
    <button id="submitButton">+</button>
</header>

<section id="output">
    <ul class="todo">
        <li class="toDoItem">
          <p>Clean Room!</p>
          <div class="close">X</div>
        </li>
    </ul>
</section>
<script src="todo.js"></script>

我也不确定我是否正在使用最佳实践，因为我是Web开发的新手，所以任何技巧也将被完全理解！

最佳答案

您需要在关闭按钮上提供实时事件处理程序。 This example应该有所帮助。为了提供更多功能，如果可以并且不介意使用JS库，使用jQuery会更容易，更直接。

jQuery示例：

$(document).on("click", ".close", function() {
    $(this).parent().hide();
});

由于它是一个div，因此无需阻止默认行为。

关于javascript - 待办事项 list 关闭按钮有问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49246284/