Entfernen Sie ein Element aus einem Array mit JavaScript splice/indexOf

Question

Ich versuche, einen weiteren Button hinzuzufügen, der Aufgaben von der Liste entfernt und es dem Benutzer ermöglicht, beliebige davon zu entfernen. Ich versuche, splice mit indexOf zu verwenden, aber bisher funktioniert es nicht. Hier ist der Code. Vielen Dank für die Hilfe.

// tasks.js #2
// Dieses Skript verwaltet eine To-Do-Liste.

// Benötige eine globale Variable:
var tasks = [];

// Funktion wird aufgerufen, wenn das Formular abgesendet wird.
// Funktion fügt eine Aufgabe zum globalen Array hinzu.
function addTask() {
'use strict';

// Hole die Aufgabe:
var task = document.getElementById('task');

// Verweis auf das Ausgabeelement:
var output = document.getElementById('output');

// Für die Ausgabe:
var message = '';

if (task.value) {

    // Füge den Eintrag zum Array hinzu:
    tasks.push(task.value);

    // Aktualisiere die Seite:
    message = 'To-Do';
    for (var i = 0, count = tasks.length; i < count; i++) {
        message += '' + tasks[i] + '';
    }
    message += '';
    output.innerHTML = message;

} // Ende der task.value IF.

// Gib false zurück, um das Absenden zu verhindern:
return false;

} // Ende der addTask() Funktion.

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

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

}
// Erstkonfiguration:
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);
} // Ende der init() Funktion.
window.onload = init;

Answer 1

Wenn Sie die Funktion deleteTask genauso wie addTask aufbauen möchten, müssen Sie den folgenden Algorithmus implementieren:

1) finden Sie das Aufgaben-Element im DOM und erhalten Sie seinen Wert
2) überprüfen Sie, ob der Wert im `tasks`-Array vorhanden ist
3) wenn ja, entfernen Sie ihn

Hier ist ein Ansatz, um dies zu erreichen:

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 der Praxis würde ich wahrscheinlich jedoch einen etwas anderen Weg gehen. Aktuell haben addTask und deleteTask den gleichen Code zum Sammeln des Werts dieser Aufgabe, aber das ist vermeidbar - extrahieren Sie einfach den Code, der den Wert abruft, in eine separate Aktion (mit einem Namen wie getCurrentTask) und lassen Sie diese Methoden mit dem Parameter task arbeiten.

Answer 2

Sie speichern einen Verweis auf ein Element #inputTask in der inputTask-Variablen, versuchen dann aber, den Index einer Zeichenfolge "inputTask" in einem Array array abzurufen (das nicht vorhanden ist, wie von @Frits in den Kommentaren erwähnt).

Dann versuchen Sie, das Array mit dem Index und der Länge von inputTask zu spalten, die keine Länge hat, weil es ein Element ist, und wenn es eine Zeichenfolge war, warum verwenden Sie dann ihre Länge zum Spalten?

Splice entfernt (und fügt hinzu) Elemente: Das erste Argument ist der Index des ersten Elements, das entfernt werden soll, das zweite Argument ist die Anzahl der Elemente, die aus dem Array entfernt werden sollen. Wenn Sie also ein Element entfernen möchten, sollte es so aussehen: array.splice(index, 1)

Answer 3

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

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

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

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