删除数组方法delete中的输入时出现问题

Question

当我试图删除添加的输入时，我收到一条错误消息，Value为NULL。因此，当我点击DELETE时，只会删除输入，而不是所有输入。函数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所指出的，不应该将Array用作变量名——它是一个保留字——所以将Array更改为arr。其次，Delete按钮需要针对同一li元素中的input标记。因此，更改变量名称并针对正确的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>