Дайте обещание подождать, пока элемент НЕ существует

Question

Я нашел определение обещания здесь , которое ждет, пока в DOM существует элемент:

function waitForElement(selector) {
  return new Promise(function(resolve, reject) {
    var element = document.querySelector(selector);

    if(element) {
      resolve(element);
      return;
    }

    var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        var nodes = Array.from(mutation.addedNodes);
        for(var node of nodes) {
          if(node.matches && node.matches(selector)) {
            observer.disconnect();
            resolve(node);
            return;
          }
        };
      });
    });

    observer.observe(document.documentElement, { childList: true, subtree: true });
  });
}

Мне нужно обещание reverse также для такого элемента, как LINK, для которого нет события onRemoved. Другими словами, как я могу получить обещание, которое разрешается, как только элемент удаляется из DOM!?

Answer 1

Если родительский элемент элемента, который вы хотите проверить, является постоянным, а элемент, который вы хотите проверить, удаляется из родительского элемента (например, сам родительский элемент не удаляется), присоедините наблюдателя к родительскому элементу и проверьте чтобы увидеть, соответствует ли какой-либо из его removedNodes элементу, который вы хотите наблюдать:

const prom = new Promise((resolve) => {
  new MutationObserver((mutations, observer) => {
    for (const mutation of mutations) {
      for (const removedNode of mutation.removedNodes) {
        if (removedNode.id === 'button') {
          observer.disconnect();
          resolve();
        }
      }
    }
  })
    .observe(outer, { childList: true });
});

button.addEventListener('click', () => button.remove());

prom.then(() => {
  console.log('promise resolved');
});

<div id="outer">
  <button id="button">click</button>
</div>

Если вместо одного из удаляемых элементов родители могут быть удалены, вам придется подключить слушателя к предка, а не только непосредственного родителя, и наблюдайте, является ли какой-либо из удаленных узлов одним из элементов в цепочке до интересующего вас узла.

Менее элегантным решением будет опрос с помощью setInterval:

const button = document.querySelector('button');
const prom = new Promise((resolve) => {
  const intervalId = setInterval(() => {
    if (!button.isConnected) {
      resolve();
      clearInterval(intervalId);
    }
  }, 50);
});

button.addEventListener('click', () => button.remove());

prom.then(() => {
  console.log('promise resolved');
});

<div id="outer">
  <button>click</button>
</div>