使用 JavaScript splice/indexOf 从数组中删除项目

Question

我正在尝试添加另一个按钮，该按钮将从列表中删除任务，并允许用户删除其中的任何一个。 我正在尝试将 splice 与 indexOf 一起使用，但到目前为止还没有工作。 这是代码。 谢谢您的帮助。

// tasks.js #2
// This script manages a to-do list.

// Need a global variable:
var tasks = [];

// Function called when the form is submitted.
// Function adds a task to the global array.
function addTask() {
'use strict';

// Get the task:
var task = document.getElementById('task');

// Reference to where the output goes:
var output = document.getElementById('output');

// For the output:
var message = '';

if (task.value) {

    // Add the item to the array:
    tasks.push(task.value);

    // Update the page:
    message = '<h2>To-Do</h2><ol>';
    for (var i = 0, count = tasks.length; i < count; i++) {
        message += '<li>' + tasks[i] + '</li>';
    }
    message += '</ol>';
    output.innerHTML = message;

} // End of task.value IF.

// Return false to prevent submission:
return false;

} // End of addTask() function.

function deleteTask() {
var inputTask = document.getElementById('task');
var taskLength = inputTask.length;

var i = array.indexOf("inputTask");
if (i != -1) {
    array.splice(i, taskLength);
}

}
// Initial setup:
function init() {
    'use strict';
    //document.getElementById('theForm').onsubmit = addTask;

    var elem1 = document.getElementById("submit");
    elem1.addEventListener("click", addTask, false);

   var elem2 = document.getElementById("delete");
    elem2.addEventListener("click", deleteTask, false);
} // End of init() function.
window.onload = init;

Answer 1

const array = ["a", "b", "c", "d"];

const index = array.indexOf("c");

if (index > -1) {
  array.splice(index, 1);
}

console.log(array); // ["a","b","d"]

Answer 2

如果要像构建addTask一样构建deleteTask函数，则需要实现以下算法：

1) find the task element in DOM and get its value
2) check whether or not the value is in the `tasks` array
3) if it's there, remove it

这是执行此操作的一种方法：

function deleteTask() {
  // 1
  var taskEl    = document.getElementById('task');
  // 2
  var taskIndex = tasks.indexOf(taskEl.value);
  if (taskIndex !== -1) {
    // 3
    tasks.splice(taskIndex, 1);
  }
  return false;
}

不过，在实践中，我可能会采取一些不同的方式。 目前addTask和deleteTask具有用于收集此任务值的相同代码，但它是可以预防的 - 只需将检索值的代码提取到单独的操作中（命名为getCurrentTask ），并使这些方法与task参数一起task 。

Answer 3

您在inputTask变量中存储对元素 #inputTask 的引用，然后尝试获取数组array字符串"inputTask"的索引（它不存在，正如@Frits 在评论中提到的那样）。

然后你尝试用inputTask的索引和长度拼接数组，它没有长度，因为它是一个元素，如果它是一个字符串，为什么要用它的长度来拼接？

Splice 删除（并添加）元素：第一个参数是要删除的第一个元素的索引，第二个参数是要从数组中删除的元素数。 所以如果你想删除一个元素，它应该看起来像array.splice(index, 1)