Event listeners on chrome extension class of buttons doesn't seem to work, or the action of the listener doesn't work?

Question

I am trying to make a chrome-extension popup-window whereby an user can add a specific tab's URL or delete one or delete all. The delete all works fine, the add URL does the trick too. However, the 'delete one link' doesn't work at all and I have really been struggling with that department. I hope someone could help me out with this one because I don't know what the problem is. Here are the files:

• popup.js: gist.github.com/kobrajunior/4852f85ae18cfb9edbe542a820b8c107

• popup.html: gist.github.com/kobrajunior/1c26691734c19391c62dc336ed2e1791

• manifest.json: gist.github.com/kobrajunior/78acda830c2d1c384333542422f1494d

I have read on other posts that it may be because the getElementsByClassName doesn't return a 'real' array by which you can manipulate things with functions, if that's true, than I'm all out of tools to solve this one.

The 'X' button doesn't work :

Clear everything buttons works as expected :

Answer 1

In your removeMe() function you have to remove your DOM element from its parent element. Something like this:

function removeMe(i) {
  // remove it from the DOM
  var list = document.getElementsByClassName('items');
  list[i].parentNode.removeChild(list[i]);
  list.splice(i, 1);

  // remove it from chrome-storage
  chrome.storage.local.get({urlList:[], titleList:[]}, function(data) {
     urlList = data.urlList;
     titleList = data.titleList;
     urlList.splice(i, 1);
     titleList.splice(i, 1);

     // update chrome storage
     saveList();
  }); 
}

Or you could just use your main list id:

document.getElementById("list").removeChild(list[i]);