# Remove and complete buttons for checklist in JavaScript

In the previous lesson, after solving the problems, you should have obtained the following code:

`<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 = ''; } });`

Let's now add buttons `'remove'` and `'done'`. Let's design these buttons as `span` tags. We will also place the task text in the `span` tag:

`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 = 'remove'; li.appendChild(remove); let mark = document.createElement('span'); mark.textContent = 'done'; li.appendChild(mark); list.appendChild(li); this.value = ''; } });`

Let's also assign CSS classes to each of the `span` tags so that they can be accessed via CSS to make the beauty we need:

`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 = 'remove'; li.appendChild(remove); let mark = document.createElement('span'); mark.classList.add('mark'); mark.textContent = 'done'; li.appendChild(mark); list.appendChild(li); this.value = ''; } });`

Add CSS to assigned classes:

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