当我按编辑时，待办事项列表项消失，当我按删除时，id 待办事项列表消失

Question

我正在尝试创建一个简单的待办事项列表应用程序来练习 JS。每个待办事项列表都有两个按钮，我试图通过事件解除管制来实现按钮行为。但是，当我按编辑时，待办事项列表项消失，当我按删除时，id 待办事项列表消失。

const form = document.getElementById("form");
const wrapper = document.getElementById("todo-lists");

function handleTodo(e) {
  const btn = e.target.closest("button");
  if (!btn) return; //not button
  const todo = e.currentTarget; // todo generated by sumit()

  if (btn.innerText === "remove") {
    wrapper.remove(todo);
  } else if (btn.innerText === "edit") {
    const todo_text = todo.querySelector("div");
    const new_input = document.createElement("input");
    new_input.value = todo_text.innerText;
    todo.prepend(new_input);
    todo.remove(todo_text);
  }
}

function submit(e) {
  e.preventDefault();
  const value = form.elements["todo_input"].value;
  const todo = document.createElement("div");

  todo.addEventListener("click", handleTodo);

  const todo_text = document.createElement("div");
  const del = document.createElement("button");
  const edit = document.createElement("button");
  del.innerText = "remove";
  edit.innerText = "edit";
  todo_text.innerText = value;

  todo.appendChild(todo_text);
  todo.appendChild(del);
  todo.appendChild(edit);
  wrapper.appendChild(todo);
  e.target.elements["todo_input"].value = "";
}

form.addEventListener("submit", submit);

<div id="container">
  <div id="todo-lists"></div>
  <div id="form-wrapper">
    <form id="form">
      <input type="text" placeholder="Enter todo" name="todo_input" />
      <button>Enter</button>
    </form>
  </div>
</div>

这是handleTodo函数的e.target和e.currentTarget的结果。

我将 codepen 地址留在您要运行此代码的位置。

https://codepen.io/gmjjfjnm-the-flexboxer/pen/RwOJggQ

我查看了控制台日志并阅读了有关事件委托的文档，但找不到正确的答案。

Answer 1

评论似乎解决了你的核心问题，无论如何......我在

save

上实现了一个

edit

按钮。

const form = document.getElementById("form");
const wrapper = document.getElementById("todo-lists");

function handleTodo(e) {
  const btn = e.target.closest("button");
  if (!btn) return; //not button
  const todo = e.currentTarget; // todo generated by sumit()

  if (btn.innerText === "remove") {
    wrapper.removeChild(todo);
  } else if (btn.innerText === "edit") {
    const todo_text = todo.querySelector("div");
    const new_input = document.createElement("input");
    new_input.value = todo_text.innerText;
    todo_text.remove()
    todo.prepend(new_input);
    btn.innerText = "save";

    btn.addEventListener('click', () => {
      todo.replaceChildren();
      todo.appendChild(todo_text);
      const del = document.createElement("button");
      const edit = document.createElement("button");
      del.innerText = "remove";
      edit.innerText = "edit";
      todo.appendChild(todo_text);
      todo.appendChild(del);
      todo.appendChild(edit);

    })
  }
}

function submit(e) {
  e.preventDefault();
  const value = form.elements["todo_input"].value;
  const todo = document.createElement("div");

  todo.addEventListener("click", handleTodo);

  const todo_text = document.createElement("div");
  const del = document.createElement("button");
  const edit = document.createElement("button");
  del.innerText = "remove";
  edit.innerText = "edit";
  todo_text.innerText = value;

  todo.appendChild(todo_text);
  todo.appendChild(del);
  todo.appendChild(edit);
  wrapper.appendChild(todo);
  e.target.elements["todo_input"].value = "";
}

form.addEventListener("submit", submit);

<div id="container">
  <div id="todo-lists"></div>
  <div id="form-wrapper">
    <form id="form">
      <input type="text" placeholder="Enter todo" name="todo_input" />
      <button>Enter</button>
    </form>
  </div>
</div>