# Кнопки для удаления и завершения в чеклисте на JavaScript

В предыдущем уроке после решения задач у вас должен был получится следующий код:

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

Давайте теперь добавим кнопочки `'удалить'` и `'сделано'`. Выполним эти кнопочки в виде тегов `span`. Также в теге `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 = 'удалить'; li.appendChild(remove); let mark = document.createElement('span'); mark.textContent = 'сделано'; li.appendChild(mark); list.appendChild(li); this.value = ''; } });`

Давайте также навесим CSS классы на каждый из тегов `span`, чтобы к ним можно было обратиться через CSS и навести нужную нам красоту:

`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 = 'удалить'; li.appendChild(remove); let mark = document.createElement('span'); mark.classList.add('mark'); mark.textContent = 'сделано'; li.appendChild(mark); list.appendChild(li); this.value = ''; } });`

Добавим CSS к навешенным классам:

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