Показать сообщение отдельно
  #2 (permalink)  
Старый 09.10.2019, 16:50
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

<ul class="todos"></ul>
<input type="text" class="todotext">
<button class="addtodo">add todo</button>
<script>
  let todos = []
  const todosEl = document.querySelector('.todos')
  const todoTextEl = document.querySelector('.todotext')
  const update = () => {
    todosEl.innerHTML = todos.map(todo => `<li>${todo.id} - ${todo.text} <button data-todo-id=${todo.id}>x</button></li>`).join('')
  }
  document.querySelector('.addtodo').addEventListener('click', () => {
    todos.push({
      id: todos.length > 0 ? todos.reduce((p, c) => p.id > c.id ? p : c).id + 1 : 1,
      text: todoTextEl.value,
    })
    todoTextEl.value = ''
    update()
  })

  todosEl.addEventListener('click', e => {
    todos = todos.filter(todo => todo.id !== parseInt(e.target.dataset.todoId))
    update()
  })
</script>

5 минут )
Ответить с цитированием