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

Question

I am trying to add another button that will remove tasks from the list, and allow the user to remove any of them. I am trying to use splice with indexOf but it's not working so far. Here is the code. Thanks for the help.

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

If you want to build deleteTask function the same way as addTask built, you need to implement the following algorithm:

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

Here's one approach to do this:

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;
}

In practice, though, I'd probably go a bit different way. Currently addTask and deleteTask have the same code for collecting the value of this task, but it's preventable - just extract the code that retrieves the value into a separate action (named something like getCurrentTask ) and make these methods work with task param instead.

Answer 3

You store a reference to an element #inputTask in the inputTask variable but then try to get the index of a string "inputTask" in an array array (which does not exsist, as mentionned by @Frits in the comments).

Then you try to splice the array with the index and the length of inputTask which has no length because it's an element, and if it was a string, why use its length to splice ?

Splice removes (and adds) elements : the first argument is the index of the first element you want to remove, the second agrument is the number of elements you want to remove from the array. So if you want to remove one element, it should look like array.splice(index, 1)