My Solutions, is a little bit different since I was doing research when I forgot which method to use.

I am just sharing my solution. I am not sure if one is a more optimal way to do it over the other. I wanted to use Google and MDN documents to search when I forgot the method I needed instead of using the TeamTreeHouse video as a reference. Since realistically I know TeamTreeHouse wont always have a video for everything I need to find. I did have to use it though for the .type method since I couldn't figure out what the property was even called I was trying to change. Anyhow my solution...

// 4: Set the class of the <ul> to 'list' const ul = document.querySelector("ul"); ul.className = "list";

// 5: Create a new list item and add it to the <ul>

var li = document.createElement("li") li.innerHTML = "<input>"; li.appendChild(document.createTextNode(" Play Video Games")); ul.appendChild(li);

// 6: Change all <input> elements from text fields to checkboxes

const inputs = document.querySelectorAll("input"); for(var i = 0; i < inputs.length; i++){

inputs[i].type = "checkbox";

}

// 7: Create a <button> element, and set its text to 'Delete' // Add the <button> inside the '.extra' <div>

button = document.createElement("button"); button.appendChild(document.createTextNode("delete")); divExtra = document.querySelector("div.extra"); divExtra.appendChild(button);

// 8: Remove the '.extra' <div> element from the DOM when a user clicks the 'Delete' button

button.addEventListener('click', removeItem);

function removeItem(){

divExtra.remove();

}