# Создание чеклиста с помощью делегирования на JavaScript

В данном уроке я возьму код для создания чеклиста на JavaScript, созданный мной в одном из моих видео и переделаю этот код на делегирование. При этом код упростится и станет более простым для восприятия.

## Исходники кода

`.done span { text-decoration: line-through; color: gray; }` `<ul id="checklist"></ul> <input id="add">` `let checklist = document.querySelector('#checklist'); let add = document.querySelector('#add'); add.addEventListener('blur', function() { let li = document.createElement('li'); li.innerHTML = '<span data-elem="text">' + this.value + '</span><input data-elem="checkbox" type="checkbox"><a data-elem="remove" href="">X</a>'; this.value = ''; checklist.appendChild(li); li.addEventListener('click', function(event) { if (event.target.dataset.elem) { switch (event.target.dataset.elem) { case 'text': let span = event.target; let input = document.createElement('input'); input.value = event.target.innerHTML; span.innerHTML = ''; span.appendChild(input); input.addEventListener('blur', function() { span.innerHTML = this.value; }); break; case 'checkbox': li.classList.toggle('done'); break; case 'remove': li.parentElement.removeChild(li); event.preventDefault(); break; } } }); });`
←→
↑