title: Adding an event listener to a list element contained within a <ul> in a popup menu
body: <p>I am trying to create an extension where you are able to enter data into an input box the popup menu. This data should be saved and show up every time you launch the popup menu. You should be able to remove data from the list by clicking the element. I have been able to figure out how to store the data points but I am having trouble deleting it.
  Here's the popup.js</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>// global variables
  var urlList=[];
  
  document.addEventListener('DOMContentLoaded', function() {
      getUrlListAndRestoreInDom();
      // event listener for pressing enter
      var input = document.getElementById('url');
      input.addEventListener("keyup", function(event){
    if(event.keyCode == 13){
     workTab = input.value;
      if (workTab.length&gt;0 &amp;&amp; urlList.indexOf(workTab) === -1){
       addUrlToListAndSave(workTab);
                addUrlToDom(workTab);
      } 
      input.value ="";
     } 
    }); 
  });
  document.querySelectorAll('ul li').forEach(function(click){
    click.addEventListener("click",function(){
     alert(this.id);
     console.log(document)  
    })
   });
  
      
  function getUrlListAndRestoreInDom(){
      chrome.storage.local.get({urlList:[]},function(data){
          urlList = data.urlList;
          urlList.forEach(function(url){
              addUrlToDom(url);
          });
      });
  }
  
  function addUrlToDom(url){
      var newLine = document.createElement('li');
      newLine.textContent = url;
      newLine.setAttribute("id", url);
      document.getElementById("list").appendChild(newLine);
  }
  
  function addUrlToListAndSave(url){
      if(urlList.indexOf(url) === -1){
          //URL is not already in list
          urlList.push(url);
          saveUrlList();
      }
  }
  function removeUrlAndSave(url){
   myarray.splice($.inArray(url, urlList), 1);
   saveUrlList();
  }
  
  function saveUrlList(callback){
      chrome.storage.local.set({urlList},function(){
          if(typeof callback === 'function'){
              //If there was no callback provided, don't try to call it.
              callback();
          }
      });
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's the popup.html:</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="popup.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;div id="container"&gt;
    &lt;input type="url" id ="url" placeholder="timetowork.com"&gt;
    &lt;ul id = "list"&gt;
     &lt;li id="google"&gt;google&lt;/li&gt;
           &lt;li id="bbc"&gt;bbc&lt;/li&gt;
    &lt;/ul&gt;
   &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
  &lt;script src="popup.js"&gt;&lt;/script&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see, I am trying to trigger an event when the user clicks on the data point. What ends up happening is that if the list element was already in the original HTML file, it triggers. Otherwise, if it was added in through the input box, it doesn't.</p>