Cannot 'press' a just created button inside a pop-up window immediately. I have to close the pop-up and then open it again (chrome-extension pop-up)
<h3>Appreciation, can be skipped</h3>

<p>I have read this awesome post here: <a href="https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call">How do I return the response from an asynchronous call?</a>. Thanks to the amazing community here I've come really far with this project but there is just a final bug. </p>

<h1>How the program should be functioning</h1>

<p>I have a program whereby it uses a chrome-extension (browser-action). When the user clicks an icon he/she can add the link of the current website, delete all of the links at once, or delete just one link with a 'X' button next to the link's title. </p>

<h3>The code</h3>

<p>This is from popup.js, the problem lies within the 'flow' of these functions.</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>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
        for (var i = 0, n = urlList.length; i &lt; n; i++) {
            addToDom(urlList[i], titleList[i]);
        }
        
        // 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 &lt; k; j++) {
            listenJ(j);
        } 
        function listenJ(j) {
            allButtons[j].addEventListener('click', () =&gt; 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
    var item = items[j];
    list.removeChild(item);
    
    // return the DOM to original state
    if (items.length === 0) {
    document.getElementById('list').innerHTML = '';
    document.getElementById('div').innerHTML = '&lt;h3&gt;No content yet! Click "add link" to add the link of the current website!&lt;/h3&gt;';
    }
    
    // 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();
    }); 
}

function addToDom(url, title){
    // change the (greeting) text message
    document.getElementById("div").innerHTML = "&lt;h2 id='title'&gt;Saved Pages&lt;/h2&gt;";
  
    // Build the new DOM elements programmatically
    var newLine = document.createElement('li');
    var newLink = document.createElement('a');
    var button = document.createElement('button');
    newLink.textContent = title;
    newLine.appendChild(button);
    button.setAttribute('class', 'buttons');
    button.textContent = 'delete';
    newLine.setAttribute('class', 'items');
    newLink.setAttribute('href', url);
    newLink.setAttribute('target', '_blank');   // opens link in new tab
    newLink.setAttribute('tabindex', -1);       // remove focus from links in popup-window
    newLink.setAttribute('id', 'item');
    newLine.appendChild(newLink);
    document.getElementById('list').appendChild(newLine);
}</code></pre>
</div>
</div>
</p>

<p>For extra information:</p>

<p>popup.html: gist.github.com/kobrajunior/1c26691734c19391c62dc336ed2e1791 </p>

<p>manifest.json: gist.github.com/kobrajunior/78acda830c2d1c384333542422f1494d</p>

<h1>The bug</h1>

<p>Whenever I press 'add link' inside the popup-window, the link and the 'X' button gets shown. However, when I press that button it doesn't work immediately. I first have to close the popup-window, open it again and then pressing the 'X' button works. I know something is wrong with the order of asynchronous calls that I have but I can't put my finger on it. </p>

<h1>Edit</h1>

<p>I've added the answer of Andrew but there seems to be the following problem: every time I try to remove the <em>last</em> link it works fine without problems. Only when I have a link <strong>before</strong> the last one (or 2 places before or even the very first link) and try to delete that link through the 'X' button, it deletes all of the links <strong>under</strong> the deleted link <em>including</em> the link to be deleted. Please see this pictures:</p>

<p>Before: I haven't clicked that button, but I'm about to: <a href="https://i.stack.imgur.com/IFZc6.png" rel="nofollow noreferrer">https://i.stack.imgur.com/IFZc6.png</a></p>

<p>After: after I have clicked that button: <a href="https://i.stack.imgur.com/cafqr.png" rel="nofollow noreferrer">https://i.stack.imgur.com/cafqr.png</a></p>

<p>Also, the debugger gives me this error whenever I try to delete one link: <a href="https://i.stack.imgur.com/nStFr.png" rel="nofollow noreferrer">https://i.stack.imgur.com/nStFr.png</a></p>

<p>The location of that error is inside my removeMe function and this specific code: </p>

<pre><code> list.removeChild(item);
</code></pre>