Can someone tell me how good/bad this code is for a super simple todo list made from vanilla JavaScript? Anything to work on or consider on my next projects?
// establish variables
var addButton = document.getElementById('btnAdd');
// event listeners
addButton.addEventListener("click", addItem);
// assign event listener to all delete links
function assignDeleteLinkEvent(){
var deleteLinks = document.getElementsByClassName('delete-link');
for (var i=0;i<deleteLinks.length;i++){
deleteLinks[i].addEventListener("click", removeItem);
}
}
function addItem(){
// establish variables
var textBox = document.getElementById('textBox');
var list = document.getElementById('todoList');
var listElement = document.createElement('li');
var deleteLink = document.createElement('a');
// append item to list
list.appendChild(listElement);
listElement.innerText = textBox.value;
// append delete link to item
deleteLink.setAttribute("href", "#");
deleteLink.setAttribute("class", "delete-link");
deleteLink.innerHTML = "x";
listElement.appendChild(deleteLink);
assignDeleteLinkEvent();
// reset input box
textBox.value = "";
}
// removes the item
function removeItem(){
var parent = this.parentNode.parentNode;
var child = this.parentNode
parent.removeChild(child);
}