Как обнаружить добавление / удаление элемента из элемента dom?

Question

Скажи, что у меня был div#parent и я append а также remove элементы к нему с помощью jquery. Как бы я мог обнаружить, когда такое событие происходит на div#parent элемент?

Answer 1

Используйте Наблюдателей Мутации, как предложено @Qantas в своем ответе

---

Следующие методы устарели

Вы можете использовать DOMNodeInserted и DOMNodeRemoved

$("#parent").on('DOMNodeInserted', function(e) {
    console.log(e.target, ' was inserted');
});

$("#parent").on('DOMNodeRemoved', function(e) {
    console.log(e.target, ' was removed');
});

MDN Docs

Answer 2

Не используйте события мутации, такие как DOMNodeInserted и DOMNodeRemoved.

Вместо этого используйте DOM Mutation Observers, которые поддерживаются во всех современных браузерах, кроме IE10 и ниже ( Могу ли я использовать). Наблюдатели мутаций предназначены для замены событий мутации (которые были признаны устаревшими), так как было обнаружено, что они имеют низкую производительность из-за недостатков в его конструкции.

var x = new MutationObserver(function (e) {
  if (e[0].removedNodes) console.log(1);
});

x.observe(document.getElementById('parent'), { childList: true });

Answer 3

Вы должны связать DOMSubtreeModified событие

$("#parent").bind("DOMSubtreeModified",function(){
  console.log('changed');
});

http://jsfiddle.net/WQeM3/

Answer 4

Это не позволило бы мне прокомментировать ниже верхний ответ, но чтобы ответить на ваш вопрос @DenisKolodin, чтобы слушать самоуничтожение, вы можете сделать что-то вроде этого:

      function watchElForDeletion(elToWatch, callback, parent = document.querySelector('body')){
  const observer = new MutationObserver(function (mutations) {

    // loop through all mutations
    mutations.forEach(function (mutation) {

        // check for changes to the child list
        if (mutation.type === 'childList') {

            // check if anything was removed and if the specific element we were looking for was removed
            if (mutation.removedNodes.length > 0 && mutation.removedNodes[0] === elToWatch) {
                callback();
            }
        }
    });
  });

  // start observing the parent - defaults to document body
  observer.observe(parent, { childList: true });
};

По умолчанию родительский элемент является элементом body, а обратный вызов выполняется только в том случае, если конкретный элемент, который вы ищете, удален.

Answer 5

Я думаю, что мы используем socket.io!.

потому что мы определяем, какой элемент следует добавить, а затем, возможно, угадываем, какой элемент будет удален

Может быть, это возможно

Спасибо