javascript - 如何让按钮出现在列表项旁边？

Question

我正在使用 Javascript 制作一个基本的待办事项列表应用程序。我可以输入列表元素，但在列表元素旁边制作“删除”按钮以及使用该按钮删除列表中的项目时遇到问题。

function todoList() {
  var item = document.getElementById("todoInput").value
  var text = document.createTextNode(item)
  var newItem = document.createElement("li")
  newItem.appendChild(text)
  document.getElementById("todoList").appendChild(newItem)

  var remove = document.createElement('button');
  remove.classList.add('remove');
  remove.innerHTML = "X";
  remove.addEventListener('click', () => this.remove(todoInput));

}

<form id="todoForm">
  <label>Task Name: </label>
  <input id="todoInput">
  <button type="button" onclick="todoList()">Add Task</button>
</form>
<ol id="todoList">
</ol>

Answer 1

您没有附加新创建的 remove按钮元素完全添加到 DOM 中。如果您应该附加为 newItem 的子级在附加 newItem 之前到 DOM。

此外，如果您希望使用删除按钮删除条目，只需调用 newItem.remove() 即可。在它的回调中。由于变量是函数作用域的，因此每个删除按钮都会“记住”哪个 <li>它应该删除的元素。不需要遍历父DOM树来找出要删除哪个节点:

function todoList() {
  const item = document.getElementById("todoInput").value;
  const text = document.createTextNode(item);
  const newItem = document.createElement("li");
  newItem.appendChild(text);
  
  // Create the button
  const remove = document.createElement('button');
  remove.classList.add('remove');
  remove.innerHTML = "X";
  remove.addEventListener('click', () => newItem.remove());
  
  // Make sure you also append it to the new `<li>` element!
  newItem.appendChild(remove);
  
  document.getElementById("todoList").appendChild(newItem)
}

<form id="todoForm">
  <label>Task Name: </label>
  <input id="todoInput">
  <button type="button" onclick="todoList()">Add Task</button>
</form>
<ol id="todoList">
</ol>