Top.Mail.Ru
Ответы

Как вы наблюдаете за удаляемыми узлами DOM?

У меня есть плагин, он реагирует когда происходит добавление или удаление узла DOM:

$.fn.domNodeChanged = function(cb, e)
{
var e = e || {subtree:true, childList:true, characterData:true};
$(this).each(function()
{
var callback = function(changes)
{
cb.call(node, changes, this);
}
var node = this;
(new MutationObserver(callback)).observe(node, e);
});
};

$('selector').domNodeChanged(function()
{
//Что-то выполняем
});

Но что, если мне необходимо только удаление? Можно ли, оформить это как событие?

По дате
По рейтингу
Аватар пользователя
Ученик
5лет

Т. е. проблема в том, что не понятно: Удалилось или добавилось?

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

data-child-length="17"

При запуске следующего события...

let childLength = elem.childNodes.length;
if( childLength < Number(elem.dataset.childLength) ) {
// Значит удалилось.
}
elem.dataset.childLength = childLength;

Note: childNodes - это в том числе и текст, и пробелы/переносы строк в коде между HTML-элементами. Если нужны только HTML-элементы, тогда elem.children

P.s. Я-то не лазил, не знаю - не исключено, что у него и так уже есть такое встроенное свойство)

Аватар пользователя
Профи
5лет

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

"..не исключено, что у него и так уже есть такое встроенное свойство"

На самом деле оказалось, что так и есть, событие мутации запоминает последний удалённый, либо добавленный элемент. Если исходить из этого то:

$('.left').domNodeChanged(function(e)
{
if (e[0].addedNodes.length > 0)
{
console.log('added');
} else if (e[0].removedNodes.length > 0)
{
console.log('removed');
}
});

Вот рабочий пример:

https://jsfiddle.net/msLt24p5/



Видео по теме