在突变观察器下添加的元素在删除后抛出错误

Question

嗨，

我有html这样的代码

<div id="box"></div>

然后我有这个观察者，所以如果添加了一个添加了数据的元素，就会执行一个函数。

 new MutationObserver((mutations) => {
     for (let mutation of mutations) {
      if (mutation.type === 'childList' && mutation.addedNodes[0].dataset.added) {
       loadstuff();
      }
     }
    }).observe(box, {childList: true});

它有效，但当我删除元素时，我在控制台上收到此错误：

未捕获类型错误：mutation.addedNodes[0] 未定义

Fiddle 这里：https://jsfiddle.net/dc63r7bg/1/

我怎样才能摆脱这个错误？

谢谢。

Answer 1

您可以使用 optional chaining operator:

var box = document.getElementById("box");

function addit() {
  box.insertAdjacentHTML('afterbegin', '<span id="elm" data-added="yes">element</span>');
}

function removeit() {
  document.getElementById("elm").remove();
}

new MutationObserver((mutations) => {
  for (let mutation of mutations) {
    if (mutation.type === 'childList' && mutation.addedNodes[0]?.dataset.added) {
      console.log('added');
    }
  }
}).observe(box, {
  childList: true
});

<div id="box"></div>
<button onclick="addit()">Add</button>
<button onclick="removeit()">Remove</button>

在突变观察器下添加的元素在删除后抛出错误

added element under mutation observer throws an error after removed

javascript

mutation-observers