GitHub Viewer
const list = document.querySelector('#book-list ul');
const forms = document.forms;
// delete books
list.addEventListener('click', (e) => {
if(e.target.className == 'delete'){
const li = e.target.parentElement;
li.parentNode.removeChild(li);
}
});
// add books
const addForm = forms['add-book'];
addForm.addEventListener('submit', function(e){
e.preventDefault();
// create elements
const value = addForm.querySelector('input[type="text"]').value;
const li = document.createElement('li');
const bookName = document.createElement('span');
const deleteBtn = document.createElement('span');
// add text content
bookName.textContent = value;
deleteBtn.textContent = 'delete';
// add classes
bookName.classList.add('name');
deleteBtn.classList.add('delete');
// append to DOM
li.appendChild(bookName);
li.appendChild(deleteBtn);
list.appendChild(li);
});