Javascript: Identify when a new, second element appears and use function only on the older one (mutation observer)

Question

I know there are lots of answered questions about the mutation observer on here. But I couldn't find a solution yet.

On a website, I have a result window that opens when I click on something with a specific tool. When I click on another object with that tool, a new result window will open but the old one won't close. So I want that the old window closes when the new one appears . I can do that manually because they have a closing button. So I can use a simple click function to close it:

document.querySelector('[title="closeButton"]').click();

The problem is, I just want to close the old window, when a new one appears. I tried to use a mutation observer to see when a result window appears, but even that didn't work. Although I already used such an observer in another place without problems.

function closeResultWindow() {
  let observer = new MutationObserver(function (mutations) {
    let found = mutations.find(mutation => Array.from(mutation.addedNodes)
      .find(node => node.id ?
        node.id.includes("lefttabs_tablist_module_") : false))
    if (found) {
      console.log("Resultwindow found")
      document.querySelector('[title="closeButton"]').click();
      }
  });
  
  observer.observe(document.body, { 
    childList: true, subtree: true 
    });
};

I tried it with different functions with the observer. But this one is a function I already used successfully with another problem and just adjusted it to this one. The lefttabs_tablist_module_ is the widgetid of the result window. Every window has another number behind the lefttabs_tablist_module_ .

For example window1 has widgetid=lefttabs_tablist_module_1256 and the next window2 has widgetid=lefttabs_tablist_module_7549 . It doesn't seem to be chronological.

The observer above was just a test to see if I can identify at least one result window. But the goal is to observe when a new window is opened, so there are two, and use the click function to close the older one.

Does anyone have an idea how that would be possible? Or at least what the problem is in my code to identify one window with the observer.

Answer 1

Ok guys I solved it. It now works like that:

function closeResultWindow() {
  let observer = new MutationObserver(function (mutations) {
    let found = document.querySelectorAll('[widgetid^="lefttabs_tablist_module_"]');

    if (found.length >= 2) {
      console.log("Resultwindow found")

      // find old result window
      let closeButton = found[0].querySelector('[title="Close"]');

      // close result window
      if (closeButton) { 
        closeButton.click();
        console.log("old result window closed");
      }
    }
  });
    observer.observe(document.body, { childList: true, subtree: true });
}

closeOerebResultWindow();

Now it instantly closes the old window when I open a new one. Thanks for your help and answers!