#   
## Why use `splice()` in JavaScript?

Arrays in `Javascript` have unconventional methods to delete their elements. For instance, we can use `pop()`, `shift()`, or `filter()`. In this shot, we will use the `splice()` method because it is easier to use and a good alternative to delete a single element from a to-do list.

#    
## Syntax

---
    array.splice([indexOfElement], [noOfElemToDel], [newElemToAdd])
---

#   
## Parameters

* `[indexOfElement]`: This is the index position of the element from which you want to *start deleting the elements*.

* `[noOfElemToDel]`: This represents the *number of elements you want to delete* from the array. This is optional, but we need this in our example.

* `[newElemToAdd]`: This is also optional and allows `JavaScript` to *add a new element* to the array. We can add more than one new element.

---
> If you are new to the `splice()` method, take a look at this article on [how to use the splice() method in JavaScript](https://www.educative.io/answers/how-to-use-the-splice-method-in-javascript).
---

#   
## Code
### How to delete a 'to-do' from our to-do list

To delete an element from an array using the `splice()` method, create an #key# HTML: HyperText Markup Language #key# document. Follow the HTML code structure shown below.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Remove Element From Todo list</title>
</head>

<body>
  <h2>My Todos</h2>
  <p>Number of todos: <span id="noOfTodos">0</span></p>
  <ul id="todoList"></ul>
</body>

</html>

codemirror

## Explanation

We have a `span` element with an ID that will display the number of items in our todo. We also have a `ul` element with an ID  that will contain all our to-dos when we use JavaScript to dynamically display our to-dos.

// OUR TODOS
let todosArr = [
  { value: "write articles" },
  { value: "code" },
  { value: "play guitar" },
  { value: "read" },
];

// GRAB OUR span and ul from DOM
let todoList = document.getElementById("todoList");
let noOfTodos = document.getElementById("noOfTodos");

// A FUNCTION TO CREATE TODO
const createTodo = (arr) => {
  todoList.innerHTML = "";
  arr.forEach((todo, id) => {
    let list = document.createElement("li");
    let spanWithValue = document.createElement("span");
    let spanWithBtn = document.createElement("button");

    spanWithValue.innerText = todo.value;
    spanWithBtn.innerText = "X";
    spanWithBtn.style.color = "red";

    spanWithBtn.addEventListener("click", () => {
      deleteTodo(id);
    });

    list.appendChild(spanWithValue);
    list.appendChild(spanWithBtn);

    todoList.appendChild(list);
  });
  noOfTodos.innerText = todosArr.length;
};

const deleteTodo = (index) => {
  todosArr.splice(index, 1);
  createTodo(todosArr);
};
window.addEventListener("load", () => {
  createTodo(todosArr);
});

## Explanation

From the code above:

* We have the `todosArr` which contains our to-dos. 

* Next, we grab the `span` and `ul` using `document.getELementById()` from the DOM.

* The `createTodo()` function will take any `array` as a parameter whenever it is called. 

* When it is called, it creates a `li` element which will be parent of a `span` and a `button`. 

* The `span` holds the value of the to-do item, and the `button` is given an event listener which fires when it is clicked. 

* Then, this event firing triggers the `deleteTodo()` function.

* The `deleteTodo()` function takes the index of any element of the to-do and uses the `splice` method to remove such element from the array.

---
    todosArr.splice(index, 1);
---

* When this is done, the `createTodo()` function is called again to reload the elements now currently in the `todosArr`.

* `window.addEventListener("load")` is called so as to load the elements to the DOM before the page loads completely.

#   
## Complete code

Take a look at the demo below:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Remove Element From Todo list</title>
</head>

<body>
  <h2>My To-dos</h2>
  <p>Number of to-dos: <span id="noOfTodos">0</span></p>
  <ul id="todoList"></ul>
</body>

</html>

How to delete to-do elements in JavaScript

 Why use splice() in JavaScript? Arrays in Javascript have unconventional methods to delete their elements. For instance, we can use pop(), shift(), or filter(). In this shot, we will use the splice() method because it is easier to use and a good alternative to delete a single element from a to-do list. 

How to delete to-do elements in JavaScript

Why use `splice()` in JavaScript?

Syntax

Parameters

Code

How to delete a ‘to-do’ from our to-do list

Explanation

JavaScript code

Explanation

Complete code