Создание чеклиста с помощью делегирования на 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;
			}
		}
	});
});