I am trying to build an chrome extension for lichess.org to permanently remove some elements from the website.

As the elements (in this case divs) can reappear if the user navigates through the website, I implemented a MutationObserver to remove the divs again as soon as they get added again. However, even though the function to remove them is called and they don't change their data-id, they are only removed when the function is called for the first time.

This is what I've tried so far:

These are the divs I want to remove. They are exactly the same after reappearing.

const bullet1 = document.querySelector('[data-id="1+0"]');
const bullet2 = document.querySelector('[data-id="2+1"]');

This is the MutationObserver. The div gets added with the addedNode.

const parent_lobby = document.querySelector("#main-wrap > main");

const mutationObserver = new MutationObserver(mutations => {
   
    if (mutations[0].addedNodes[0].className == "lobby__app lobby__app-pools"){
        remove_bullet_QP();
    }
})

mutationObserver.observe(parent_lobby, {childList: true})

This is the function called to remove the elements. The first call of the method that happens as soon a the webiste is opened.

function remove_bullet_QP(){
    bullet1.remove();
    bullet2.remove();
}

remove_bullet_QP();

I've also tried to overwrite the divs before calling the function to remove them, but it didn't change the result.