title: How can I delete a JS created LI with a JS created button?
body: <p>I am creating a TODO app in JavaScript. How can I understand how to link two created JavaScript items and remove them from the DOM?</p>
  
  <p><strong>TL;DR:</strong> The place where I keep getting stuck is navigating the DOM after the list item has been created. I have tried to use a a setAttribute to the created elements with an incriminating "id" tag, but I still can figure out how to iterate over the LI's to find which button was pressed. </p>
  
  <p><strong>Code:</strong></p>
  
  <pre><code>        &lt;div class="entry-field"&gt;
            &lt;label class="task-input" for="task-input"&gt;Task:&lt;/label&gt;
            &lt;input type="text" class="task-field" placeholder="Enter Item"/&gt;
            &lt;button class="add-btn"&gt;ADD&lt;/button&gt;
          &lt;/div&gt;
          &lt;section class="task-list"&gt;
            &lt;h2&gt;Task List&lt;/h2&gt;
            &lt;div class="list-wrap"&gt;&lt;/div&gt;
              &lt;ul class="item-log"&gt;
                &lt;li class="list-item"&gt;
                  &lt;span class="item-text"&gt;this is the item&lt;/span&gt;
                  &lt;button class="delete-btn"&gt;delete&lt;/button&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/section&gt;
        &lt;/main&gt;
  
  JavaScript:
  let index = 0;
  
  //Obtaining user text, creating a Span element, append span with user text:
  function addItem() {
    let itemLog = document.querySelector(".item-log");
    let listItem = document.createElement("LI");
    let deleteBtn = document.createElement("BUTTON");
    let userEntry = document.querySelector(".task-field").value;
    let spanItem = document.createElement("SPAN");
    index++;
    //Creating LI "list-item" and append UL "itemLog"
    itemLog.appendChild(listItem);
    listItem.classList.add("list-item");
  
    listItem.setAttribute("id", index);
    //Create Span element, assign text from user input, append LI
    spanItem.innerHTML = userEntry;
    listItem.appendChild(spanItem);
    //Create deleteBtn and append to LI
    deleteBtn.innerHTML = "Delete";
    deleteBtn.classList.add("delete-btn");
    deleteBtn.setAttribute("onclick", "deleteItem()");
    deleteBtn.setAttribute("id", index);
    listItem.appendChild(deleteBtn);
  
    userEntry.value = "";
  }
  
  /*
  2) Deleting item from list:
    -use event listener to trigger parent node
    -delete child
    */
  
  function deleteItem() {
    let listItem = this.parentElement;
    listItem.parentElement.removeChild(listItem);
  }
  
  // Page event listeners
  let addBtn = document.querySelector(".add-btn");
  
  addBtn.addEventListener("click", addItem);
  
  </code></pre>