'How to add to eventListener (which deletes item) function that shows the text of this item somewhere else on the page?(JavaScript)

I would like to ask how to add to the eventListener which deletes item (by accesing its class) the function that makes this item visible in the other place on the website.

Code:

const addForm = document.querySelector('.add');
const list = document.querySelector('.todos');

const generateTemplate = todo => {
  const html = `
  <li class="list-group-item d-flex justify-content-between align-items-center">
    <span>${todo}</span>
    <i class="far fa-trash-alt delete"></i>
  </li>`;
  list.innerHTML += html;
};

addForm.addEventListener('submit', e => {
  e.preventDefault();
  const todo = addForm.add.value.trim();
  if (todo.length) {
    generateTemplate(todo);
    addForm.reset();
  }
});

list.addEventListener('click', e => {
  console.log(e);
  if (e.target.classList.contains('delete')) {
    // how to add here the function which apart from deleting the item
    //can show in the other place (somewhere below)
    e.target.parentElement.remove();
  }
});

body {
  background: #2a0fd7;
  ;
}

.container {
  max-width: 400px;
}

input[type=text],
input[type=text]:focus {
  color: #fff;
  border: none;
  background: rgba(0, 0, 0, 0.2);
  max-width: 400px;
}

.todos li {
  background: #6c6788;
}

.delete {
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="pl">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <link rel="stylesheet" href="styles.css">
</head>

<body>

  <div class="container">

    <header class="text-center text-light my-4">
      <h1 class="mb-4"></h1>
    </header>

    <ul class="list-group todos mx-auto text-light">
      <li class="list-group-item d-flex justify-content-between align-items-center">
        <span>play mariokart</span>
        <i class="far fa-trash-alt delete"></i>
      </li>
    </ul>

    <form class="add text-center my-4">
      <label class="text-light">Add a new todo...</label>
      <input class="form-control m-auto" type="text" name="add" />
    </form>


    <script src="app.js"></script>
</body>

</html>

javascript addeventlistener

Solution 1:^[1]

You are missing the closing tag </div> just before <script src="app.js"></script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Abdelrahman Elmohandes

'How to add to eventListener (which deletes item) function that shows the text of this item somewhere else on the page?(JavaScript)

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]