<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 минут )