У меня есть список элементов, и я использую Mutation Observer, чтобы проверить, были ли элементы добавлены или удалены из этого списка. Код выглядит следующим образом:
function TrackListChange(elementId) {
const targetNode = document.getElementById(elementId);
const config = { attributes: true, childList: true, subtree: true };
const callback = function (mutationsList, observer) {
for (let mutation of mutationsList) {
if (mutation.type === 'childList') {
alert("added to list");
}
if (mutation.type === 'attributes') {
alert("removed from list");
}
}
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);
}
Проблема, с которой я сталкиваюсь, заключается в том, что при удалении элемента из списка изменяются ДВА атрибута класса, и он отслеживает их обоих. Я хочу, чтобы оповещение вызывалось только один раз, когда элемент удален из списка. Чтобы попытаться объяснить лучше, вот код:
<div class="divclass active">
<ul class="items-list" id="user-items">
<li id="newitem1"></li>
<li id="newitem2"></li>
</ul>
</div>
Когда я добавляю элемент, добавляется новый элемент
, простой, как этот, никаких других изменений. Это отлично работает. Однако, когда я удаляю элемент и пытаюсь проверить, что происходит, элемент меняется, как и элемент. Из-за того, как проект был закодирован, элемент добавляет класс к удаленному элементу, который говорит 'class = "hidden".
Я прошу прощения, поскольку знаю, что это довольно сложно, не видя изменений в консоли, и мне также сложно отлаживать. По сути, есть ли способ проверить определенный атрибут c, который изменяется? Например, когда элемент удален и в него добавлен «скрытый» класс, могу ли я проверить, что именно это изменение атрибута заменено вместо всех?
Надеюсь, этого достаточно, чтобы кто-то указал мне правильное направление?