title: Using javascript to add an image to a list and then deleting that list item when the image is clicked
body: <p>Firstly I know I can make things  a lot easier by creating the ul in HTML. I'm not supposed to be doing that.</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" dir="ltr"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;&lt;/title&gt;
    &lt;/head&gt;
    &lt;body id="body"&gt;
      &lt;form  id="form" &gt;
        &lt;input id="userInput" placeholder="Enter your list item here"&gt;
        &lt;button type="button"  onclick="inputFunction()"&gt;Add&lt;/button&gt;
      &lt;/form&gt;
      &lt;script src="A4.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My Javascript so far:</p>
  
  <pre><code>// Creating Array
  var listData = ["Crab","Lobster","Scallops"];
  // Creating initial List
  function listFunction(){
    var ul = document.createElement("ul");
    ul.id = 'ulId';
  
    document.getElementById('body').appendChild(ul);
    listData.forEach(liFunction);
  
    function liFunction(element){
      var li = document.createElement('li');
      ul.appendChild(li);
      li.innerHTML+=element;
    }
  }
  listFunction();
  
  // Adding user input to the list
  function inputFunction() {
    var input = document.getElementById("userInput").value;
    listData.push(input);
    var newLi = document.createElement("li");
    document.getElementById('ulId').appendChild(newLi);
    newLi.innerHTML=input;
  }
  
  
  
  var liImg = document.getElementsByTagName('li');
  for (var i = 0; i &lt; liImg.length; i++) {
    liImg[i].addEventListener('mouseover', handlerFunction, false);
  }
  
  
  function handlerFunction(e) {
    var img = document.createElement("img");
    img.setAttribute("src","https://cdn1.iconfinder.com/data/icons/nuove/128x128/actions/fileclose.png");
    img.setAttribute("height","10");
    img.setAttribute("width", "10");
    document.getElementsByTagName('li').innerHTML += "img";
  }
  </code></pre>
  
  <p>So what I'm supposed to be doing is first create a list using the listData array, and displaying it on the page. Then I take the user input and add it to the list. This part is working fine</p>
  
  <p>The part I am stuck on is having to create/display an image next to each list item when it is mouseover'ed. Then having to delete that specific list item if the image is clicked. I've created the eventListener, but the img part doesn't seem to be working.</p>