How to make delete and complete buttons work on ToDO List Javascript?

JavaScript
1

I am creating a ToDo List in Javascript, and I am not sure how to get my delete/complete buttons to work. When I hit my delete button I want it to remove the li and when I hit the complete button I want my li background to change to background to `#51DF70. So far when I hit my delete/complete buttons it alerts me, so I know that they are working

this is my code so far and my Codepen if that helps

UPDATE: I figured out what I needed to do. I add a

var li = this.parentNode.parentNode;
    li.remove();

and

var li = this.parentNode.parentNode;
    li.classList.add("done"); //CSS class to change backround color

var input = document.getElementById('userInput');
var enterButton = document.getElementById('enter');
var deleteButtons = document.getElementsByClassName("Remove");
  for(var i = 0; i < deleteButtons.length; i++){
    deleteButtons[i].addEventListener('click', deleteListItem, false);
  }

var completeButtons =
  document.getElementsByClassName("Complete");
    for(var i = 0; i < completeButtons.length; i++){
      completeButtons[i].addEventListener('click', completeListItem, false);
    }
var ul = document.querySelector('ul');

function inputLength(){
 return input.value.length;
};

function listLength(){
  return item.length;
}

function createListElement(){
  var li = document.createElement('li');
  li.appendChild(document.createTextNode(input.value));
  //makes text node 
  
  var clonedButton = 
     document.getElementById("buttons").cloneNode(true);
      clonedButton.childNodes[1].addEventListener('click', deleteListItem, false); 
      clonedButton.childNodes[3].addEventListener('click', completeListItem, false); 
  
  li.appendChild(clonedButton);
  ul.appendChild(li);
  input.value = "";
  
}

function deleteListItem(){
  	alert("Item was deleted");
    // li.classList.add("delete");
}

function completeListItem(){
  alert("Item was completed");
  li.classLi
  
}

function addListAfterClick(){
  if(inputLength() > 0){
    createListElement();
  }
}
// Hit enter key and create list
function addAfterPress(event){
  if(inputLength() > 0 && event.which === 13){
    createListElement();
  }
}



enterButton.addEventListener('click', addListAfterClick);
input.addEventListener('keypress', addAfterPress);
2 Likes