title: pure Javascript dynamic selector
body: <p>In my html, only the first 4 elements can be deleted after clicking the "-" button, elements added to the list after entering them in the text box and clicking add do have "-" buttons but cannot be deleted after i click the "-" buttons</p>
  
  <p>Only the 4 preset entries with buttons can be deleted by clicking their respective buttons. MY additional entries cannot. What could be done? How can I make the selector or the last function adapt dynamically to what elements I would add? Thanks</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var button1 = document.getElementById("enter");
  var input = document.getElementById("userinput");
  var ul = document.querySelector("ul");
  var ul1 = document.getElementById("selection");
  var ali = document.querySelectorAll("li");
  var button2 = document.getElementsByClassName("del");
  
  //var test = document.getElementById("deleteItem")
  
  
  function inputLength(){
   return input.value.length;
  }
  
  // function createListElement(){
  //  var li = document.createElement("li"); //creates                
  //  var del = document.createElement("del");
  //   li.appendChild(document.createTextNode(input.value)); //adds what you have written (input.value) 
  //   del.appendChild(document.createElement(button)); //adds a button
  //   ul.appendChild(li); //adds a new &lt;li&gt;&lt;/li&gt; to the ul
  //   input.value= '';                      
  // }
  function createListElement(){
   var li = document.createElement("li"); //creates                
   // var button = document.createElement("button");
   // button.innerHTML = "-";
   // li.appendchild(button);
   li.appendChild(document.createTextNode(input.value)); //adds what you have written (input.value) 
   var button = document.createElement("button");
   button.setAttribute("id", "deleteItem");
   button.setAttribute("class", "del");
   button.innerHTML = "-";
   li.appendChild(button);
   ul.appendChild(li); //adds a new &lt;li&gt;&lt;/li&gt; to the ul
   input.value='';                      
  }
  
  
  function addListAfterClick(){
   if (inputLength()&gt;0){
    createListElement();
   }
  }
  
  function addListAfterKeypress(event){
   if (inputLength()&gt;0 &amp;&amp; event.keyCode === 13){
    createListElement();
   }
  }
  
  
  button1.addEventListener("click", addListAfterClick);
  
  input.addEventListener("keypress", addListAfterKeypress);
  
  //1. If you click on the list item, it toggles the .done class on and off.
  for (var i=0; i&lt;ali.length; i++) {
    ali[i].addEventListener('click', doneOnClick);
   }
  
   function doneOnClick() {
    this.classList.toggle( 'done' );
   }
  
  //2. Add buttons next to each list item to delete the item when
  //   clicked on its corresponding delete button
  
   for (var i=0; i&lt;button2.length; i++)
   {
    button2[i].addEventListener("click", delet);
   }
  
   function delet(){
    this.closest("li").remove();
   }
  
  
  //3. BONUS: When adding a new list item, it automatically adds the delete button next to it. 
  
  // var ul = document.getElementById("selection");
  // var li = document.createElement("li");
  // li.appendChild(document.createTextNode(input.value));
  // var button = document.createElement("button");
  // button.innerHTML = "-";
  // li.appendChild(button);
  // li.setAttribute("id","element4");
  // ul.appendChild(li);
  // //alert(li.id);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.coolTitle {
    text-align: center;
    font-family: 'Oswald', Helvetica, sans-serif;
    font-size: 80px;
    transform: skewY(-10deg);
    letter-spacing: 4px;
    word-spacing: -8px;
    color: tomato;
    text-shadow: 
      -1px -1px 0 firebrick,
      -2px -2px 0 firebrick,
      -3px -3px 0 firebrick,
      -4px -4px 0 firebrick,
      -5px -5px 0 firebrick,
      -6px -6px 0 firebrick,
      -7px -7px 0 firebrick,
      -8px -8px 0 firebrick,
      -30px 20px 40px dimgrey
  }
  
  .done {
    text-decoration: line-through;
  }
  
  .deleteItem{
    float: left;
    padding: 0px 2px;
    background: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;title&gt;Javascript w DOM&lt;/title&gt;
   &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;h1&gt;List&lt;/h1&gt;
   &lt;p id="onangona"&gt;test&lt;/p&gt;
   &lt;input id="userinput" type="text" placeholder="Enter items"&gt;
   &lt;button id="enter"&gt;Add&lt;/button&gt;
   &lt;ul id = "selection"&gt;
    &lt;li class = "bold red" random="24"&gt;A&lt;button id ='deleteItem' class = "del"&gt;-&lt;/button&gt;
    &lt;/li&gt;
    &lt;li&gt;B&lt;button id ='deleteItem' class = "del"&gt;-&lt;/button&gt;
    &lt;/li&gt;
    &lt;li&gt;C&lt;button id ='deleteItem' class = "del"&gt;-&lt;/button&gt;
    &lt;/li&gt;
    &lt;li&gt;D&lt;button id ='deleteItem' class = "del"&gt;-&lt;/button&gt;
    &lt;/li&gt;
   &lt;/ul&gt;
   &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>