MutationObserver для удаления div при изменении стиля

Question

Я хочу удалить div, когда стиль меняется.Я читал, что MutationObserver может сделать это.Но код, который я пробовал, не работает.

const observer = new MutationObserver(function
(mutations) {
    mutations.forEach(function (mutation) {
        if (mutation.attributes === 'style') {
            removeDiv()
        }
    })
})

const elem = document.querySelector('.show-pl');
observer.observe(elem, {
    attributes: true
})

function removeDiv() {
    Object.assign(elem.style, {
        display: 'none',
    })
}

Answer 1

function removeDiv(canvas) { 
    var elem = document.querySelector('.show-pl');
    elem.parentNode.removeChild(elem);
}

var observer = new MutationObserver(function (mutations, me) {
  var canvas = document.querySelector(".show-pl");
  if (canvas) {
    removeDiv(canvas);
    me.disconnect();
    return;
  }
});

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

Это делает то, что я хочу, но возникает ошибка "не могу прочитать свойство 'addeventlistener' из null", потому что div еще не существует в DOM.

Answer 2

Добавление нового элемента не имеет ничего общего с атрибутами, и вы не можете наблюдать мутации в элементе, которого еще нет в DOM.

Вместо этого вы ищите childList модификациина родительском элементе div будет добавлено внутри (или childList + subtree на предке, если вы не можете непосредственно наблюдать за родителем - если необходимо, предком может быть даже document.body).

Вот пример непосредственного наблюдения за родителем:

// Set up the observer on the container
let observer = new MutationObserver(function() {
    // Does the div exist now?
    const div = document.querySelector(".show-pl");
    if (div) {
        // Yes, "remove" it (you're really just hiding it) and release this observer
        console.log("The div has appeared, hiding and releasing observer");
        div.style.display = "none";
        observer.disconnect();
        observer = null;
    }
});
observer.observe(document.getElementById("the-parent"), {
    childList: true
});
console.log("Watching for the element");

// On a delay, create the div
setTimeout(() => {
    console.log("Creating the div");
    const div = document.createElement("div");
    div.textContent = "Hi there!";
    div.className = "show-pl";
    document.getElementById("the-parent").appendChild(div);
}, 800);

<div id="the-parent"></div>

Для просмотра предка вместо этого вы должны использовать предка в вызове observe и добавить subtree: true к параметрам инициализации.