Remove an Item From an Array with JavaScript spliceindexOf - Stack Overflow

admin管理员组

文章数量:1399778

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;

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;

• javascript

Share Improve this question Follow asked Sep 11, 2013 at 14:40 michaelmichael 9111 gold badge22 silver badges1313 bronze badges 2

• 3 The variable array is not defined anywhere. – Halcyon Commented Sep 11, 2013 at 14:41
• 1 Please explain how it's "not working". – James Montagne Commented Sep 11, 2013 at 14:43

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

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 ments).

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)

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.

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

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

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

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

本文标签： Remove an Item From an Array with JavaScript spliceindexOfStack Overflow