在数组方法 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() {

  //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

  arr.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(this)' class='todo-item-delete'>Delete</button>" +

    "</li>"

  ;

  

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

}

function deleteData(e) {

  console.log(arr);

  let p = e.parentNode;

  console.log(p);

  let deleteValue = p.getElementsByTagName("input")[0].value;

  var index = arr.indexOf(deleteValue);

  if (index !== -1) {

    arr.splice(index, 1);

  }

  p.remove();

  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>