在数组方法 delete 中删除输入的问题

Question

当我尝试删除添加的输入时，我收到一条错误消息，指出值为 NULL。所以我的想法是，当我点击删除时，只有输入被删除，而不是所有输入。函数myFunction()，那里的输入被添加到数组中。实际上我也想使用 Up Down 但首先 Delete 必须工作，但如果你知道我如何做 Up 和 Dwon，请写下答案。

var Array = [];

function myFunction() {

  //console.log('test');

  var todoItem = document.getElementById('new-todo-item').value;

  const Input = document.querySelectorAll('input[name="todo-item-done"]');

  console.log(Input.value);

  //Input von Add

  Array.unshift(todoItem);

  document.getElementById("todo-list").innerHTML +=

    "<li>" + 

      "<input type='text'" + " name='todo-item-done'" +

        " class='todo-item-done'" + " value='" + todoItem +

      "'> " +

      "<a id= 'myDIV' class='up' onclick='UpDown()' href='#'>" + "up"+"</a>" +

      " | " +

      "<a class='down' onclick='UpDown()' href='#'>" + "down"+"</a> " +

      "<button onclick='deleteData()' class='todo-item-delete'>Delete</button>" +

    "</li>"

  ;

  

  document.getElementById('new-todo-item').value = "";

}

function deleteData() {

var deleteValue = document.getElementsByName('todo-item-done').value;

  var index = Array.indexOf(deleteValue);

  if (index !== -1) {

    Array.splice(index, 1);

  }

}

<h1>To-Do List</h1>

<label for="todo">To do:</label>

<input type="text" id="new-todo-item">

<input onclick="myFunction()" type="submit" id="add-todo-item" value="add the todo">

<ul id="todo-list" class="todo-list"></ul>

Answer 1

两个问题：首先，正如 Matt 指出的那样，您不应该使用Arrayas 变量名——它是一个保留字——所以Array改为arr. 其次，删除按钮需要针对input同一li元素中的标记。因此，更改变量名称并定位正确的input标签，我得到：var arr = [];function myFunction() {&nbsp; //console.log('test');&nbsp; var todoItem = document.getElementById('new-todo-item').value;&nbsp; const Input = document.querySelectorAll('input[name="todo-item-done"]');&nbsp; //console.log(Input.value);&nbsp; //Input von Add&nbsp; arr.unshift(todoItem);&nbsp; document.getElementById("todo-list").innerHTML +=&nbsp; &nbsp; "<li>" +&nbsp;&nbsp; &nbsp; &nbsp; "<input type='text'" + " name='todo-item-done'" +&nbsp; &nbsp; &nbsp; &nbsp; " class='todo-item-done'" + " value='" + todoItem +&nbsp; &nbsp; &nbsp; "'> " +&nbsp; &nbsp; &nbsp; "<a id= 'myDIV' class='up' onclick='UpDown()' href='#'>" + "up"+"</a>" +&nbsp; &nbsp; &nbsp; " | " +&nbsp; &nbsp; &nbsp; "<a class='down' onclick='UpDown()' href='#'>" + "down"+"</a> " +&nbsp; &nbsp; &nbsp; "<button onclick='deleteData(this)' class='todo-item-delete'>Delete</button>" +&nbsp; &nbsp; "</li>"&nbsp; ;&nbsp;&nbsp;&nbsp; document.getElementById('new-todo-item').value = "";}function deleteData(e) {&nbsp; console.log(arr);&nbsp; let p = e.parentNode;&nbsp; console.log(p);&nbsp; let deleteValue = p.getElementsByTagName("input")[0].value;&nbsp; var index = arr.indexOf(deleteValue);&nbsp; if (index !== -1) {&nbsp; &nbsp; arr.splice(index, 1);&nbsp; }&nbsp; p.remove();&nbsp; console.log(arr);}<h1>To-Do List</h1><label for="todo">To do:</label><input type="text" id="new-todo-item"><input onclick="myFunction()" type="submit" id="add-todo-item" value="add the todo"><ul id="todo-list" class="todo-list"></ul>