Nút Xóa và Hoàn Thành trong Checklist trên JavaScript

Ở bài học trước, sau khi giải quyết các nhiệm vụ, bạn sẽ có được đoạn mã như sau:

<input id="input">
<ul id="list"></ul>

let input = document.querySelector('#input');
let list = document.querySelector('#list');

input.addEventListener('keypress', function(event) {
	if (event.key == 'Enter') {
		let li = document.createElement('li');
		li.textContent = this.value;
		list.appendChild(li);
		
		this.value = '';
	}
});

Bây giờ hãy thêm các nút 'xóa' và 'hoàn thành'. Chúng ta sẽ tạo các nút này dưới dạng thẻ span. Ngoài ra, văn bản công việc cũng sẽ được đặt trong thẻ span:

input.addEventListener('keypress', function(event) {
	if (event.key == 'Enter') {
		let li = document.createElement('li');
		
		let task = document.createElement('span');
		task.textContent = this.value;
		li.appendChild(task);
		
		let remove = document.createElement('span');
		remove.textContent = 'xóa';
		li.appendChild(remove);
		
		let mark = document.createElement('span');
		mark.textContent = 'hoàn thành';
		li.appendChild(mark);
		
		list.appendChild(li);
		
		this.value = '';
	}
});

Chúng ta cũng hãy thêm các lớp CSS vào mỗi thẻ span để có thể tùy chỉnh chúng qua CSS và thêm một số kiểu dáng đẹp mắt:

let input = document.querySelector('#input');
let list = document.querySelector('#list');

input.addEventListener('keypress', function(event) {
	if (event.key == 'Enter') {
		let li = document.createElement('li');
		
		let task = document.createElement('span');
		task.classList.add('task');
		task.textContent = this.value;
		li.appendChild(task);
		
		let remove = document.createElement('span');
		remove.classList.add('remove');
		remove.textContent = 'xóa';
		li.appendChild(remove);
		
		let mark = document.createElement('span');
		mark.classList.add('mark');
		mark.textContent = 'hoàn thành';
		li.appendChild(mark);
		
		list.appendChild(li);
		
		this.value = '';
	}
});

Thêm CSS cho các lớp đã áp dụng:

#list span {
	margin-right: 5px;
}
#list .remove, #list .mark {
	color: blue;
	cursor: pointer;
}
#list .remove:hover, #list .mark:hover {
	text-decoration: underline;
}