Removing one item from an unordered list from chrome-extension-popup also removes the item(s) that comes after that

Question

Intro

Let's say I have a list of 3 items (the items are the URL's the user adds when clicking on a button inside the chrome extension popup, see pictures). When I click on the 'X' button of item number 3, it deletes just that item. After that, when I click 'X' item number 2, the second item gets deleted. Finally, when clicking the 'X' of the first item it also gets removed. Everything works as expected. When I try the opposite, a problem occurs.

Problem

We have the same list of 3 items. Now, instead of deleting item number 3 first, I decided to delete item number 1 first. When I did that, all of the 3 items are disappeared at once. Then I reloaded the 3 items again and tried to begin with deleting item number 2, this time only item 2 and item 3 are deleted with item 1 remaining. This is weird error as it seems that whenever I click a 'X' button the consecutively items are deleted together with the item that I want to delete.

Before clicking 'X' by Google:

After clicking the 'X' only Facebook remains:

I then started using the debugger.

Debugger

So I thought this was very weird and I tried to solve the problem with the debugger. I received the following error when only pressing the 'X' button by Google (same as above pictures):

I then went to popup.js and looked at that specific line of code which contained these lines:

// the specific URL to delete
list.removeChild(items[j]);

In the code section I post the code section in more detail. I searched the error on Google and found this: removeChild. Here, the error was described as follows:

"If the child was in fact a child of element and so existing on the DOM, but was removed".

Now this made me wonder, I gazed over my code again but as far as I know, I haven't removed the URL's after Google, only Google itself. I tried to work it out on paper but in vain unfortunately. The only thing I could think of was that I should remove the "createButtonEvents" from the "addToDom" function. But if I do that, I won't be able to delete item number 1 anymore (but then I can delete item 2 without having item 3 deleted). I think the problem is way more complicated than I initially thought, so I could not solve this on my own and that's why I'm asking the question here. Now comes the 'code' section.

Code

For anyone who wants to see the entire code (all lines and files), please head to this page: GitHub

For those only concerned with the specific code where this is happening:

parts of my popup.js file:

document.addEventListener('DOMContentLoaded', function() {
    restore();
    document.getElementById('add').addEventListener('click', fetchUrl);
    document.getElementById('clear').addEventListener('click', clearAll);
  });

function restore() {
    // get the tab link and title
    chrome.storage.local.get({urlList:[], titleList:[]}, function(data) {
        urlList = data.urlList;
        titleList = data.titleList;
     
        // add the titles and url's to the DOM
        var n = urlList.length;
        for (var i = 0; i < n; i++) {
            addToDom(urlList[i], titleList[i]);
        }
        // 'X' button handlers only when all URL's are in DOM
        createButtonEvents();
    }); 
}
function addToDom(url, title) {
    // change the (greeting) text message
    document.getElementById("div").innerHTML = "<h2 id='title'>Saved Pages</h2>";
    
    // Build the new DOM elements programmatically
    var newItem = document.createElement('li');
    var newLink = document.createElement('a');
    var thisButton = document.createElement('button');
    
    newLink.textContent = title;                            
    thisButton.textContent = 'X';                          

    thisButton.setAttribute('class', 'buttons');            
    thisButton.setAttribute('tabindex', -1);                
    newItem.setAttribute('class', 'items');                 
                                
    newLink.setAttribute('href', url);                      
    newLink.setAttribute('target', '_blank');               
    newLink.setAttribute('tabindex', -1);                   
    newLink.setAttribute('id', 'item');                     
    
    newItem.appendChild(thisButton);                        
    newItem.appendChild(newLink);                           
    document.getElementById('list').appendChild(newItem);   
    createButtonEvents();
}

function createButtonEvents() {
    // create event listeners for all the 'X' buttons next to list items
    // after the 'addToDom' function has been executed
    var allButtons = document.getElementsByClassName('buttons');
    for (var j = 0, k = allButtons.length; j < k; j++) {
        listenJ(j);
    } 
    function listenJ(j) {
        allButtons[j].addEventListener('click', () => removeMe(j));
    }  
}

function removeMe(j) {
    // remove it from the DOM
    var items = document.getElementsByClassName('items');
    var list = document.getElementById('list');
    // the specific URL to delete
    list.removeChild(items[j]);
    
    // return the DOM to original state
    if (items.length === 0) {
    document.getElementById('list').innerHTML = '';
    document.getElementById('div').innerHTML = '<h3>No content yet! Click "add link" to add the link of the current website!</h3>';
    }
    
    // remove it from chrome-storage
    chrome.storage.local.get({urlList:[], titleList:[]}, function(data) {
        urlList = data.urlList;
        titleList = data.titleList;
        urlList.splice(j, 1);
        titleList.splice(j, 1);

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

Edit

Just in case somebody hasn't read it, I'll repeat the sentence inside my debugger section here again:

The only thing I could think of was that I should remove the "createButtonEvents" from the "addToDom" function. But if I do that, I won't be able to delete item number 1 anymore (but then I can delete item 2 without having item 3 deleted). I think the problem is way more complicated than I initially thought.

I know that multiple event handlers on the 'buttons class' might be working on the same time but I don't know how to format the code in another way.

Answer 1

document.getElementsByClassName creates a live list of elements.

createButtonEvents(); is being called multiple times and adds multiple event listeners which use j as an index into the live collection. Because the listeners use anonymous functions unique to each add event listener call, they are not considered the same and not discarded.

Hence removing the last element works because there are no more "jth' elements to remove after the first removal. But when you remove the first element, because the list is live, there is another first element to remove afterwards, which because there are multiple event listeners...

I tried removing the createButtonEvents() call in addToDom which fixes the console error message becuase the code is no longer trying to remove a node that is not there.

A new error was introduced: removing the first button worked, because its index is 0 in the live collection. But removal changes the indeces of items remaining in the live list. Now removing the 2nd item deletes the 3rd link because its index has been changed to 1, and what was indexed at 1 is now at 0.

---

Updated sample solution:

1. Remove the createButtonEvents function. Nested listenJ and the anonymous function to capture j, indexing a live HTML collection, are the root cause of the bug.

   Remove the call to createButtonEvents in restore

   Replace the call createButtonEvents in addToDom with

       thisButton.addEventListener('click', removeMe);
   

   so that all buttons in the list get the same click handler, whether the button was restored from storage or added later.

2. In removeMe, find the button clicked, find it's current, dynamic position in the list and remove it. The position found matches the position of the item in storage data arrays:

   function removeMe() {
       // remove list item (parent of button clicked) from the DOM
       var list = document.getElementById('list');
   
       // find position of list element with button clicked:
       for( var j = 0, child = list.firstChild; 
               child;
                   child = child.nextSibling, ++j) {
   
            if (child == this.parentNode) {
                 break;
            }
   
       }    
       list.removeChild(this.parentNode); // this is button, parent is <li>
   
       // return the DOM to original state
       if (!list.firstChild) {
       document.getElementById('list').innerHTML = '';
       document.getElementById('div').innerHTML = '<h3>No content yet! Click "add link" to add the link of the current website!</h3>';
       }
   
       // remove from Chrome storage using position in j
   
       //    urlList = data.urlList;
       //    titleList = data.titleList;
       //    urlList.splice(j, 1);
       //    titleList.splice(j, 1);
   
   
   }
   

Update of urlList and titleList was tested using test values outside of Chrome: Chrome storage update needs to be reinstated.

Answer 2

The error in the console tells you that you need to pass a Node to removeChild, it looks like you are not passing a DOM element.