Как отследить появление элемента на странице?

Как отследить появление элемента на странице и удалить его через mutation Observer? Например, есть страница на которой подгружается элемент с классом .test и мне его нужно удалить в момент появления, а не при полной загрузке страницы.
  • Вопрос задан
  • 359 просмотров
Решения вопроса 1
zkrvndm
@zkrvndm
Архитектор решений
Пример ожидания элемента с использованием MutationObserver:
// Обработчик для запуска кода сразу по готовности документа:

document.addEventListener('DOMContentLoaded', async function() {
	
	console.log('Ищем элемент .test, точнее ждем его появления...');
	
	var els = await waitElements('.test');
	
	console.log('Найдено элементов: ' + els.length + ' шт. Удаляем...');
	
	els.forEach(function(el) {
		
		el.remove();
		
	});
	
});

// Ожидание элемента:

function waitElements(selector) {
	
	return new Promise(function(returnResult) {
		
		var search_result = false;
		
		var local_reactive_function = function() {
			
			var wait_elements = document.querySelectorAll(selector);
			
			if (wait_elements.length > 0) {
				
				if (search_result === false) {
					
					search_result = true;
					observer.disconnect(); 
					
					returnResult(wait_elements);
					
				}
				
			}
			
		}
		
		var observer = new MutationObserver(local_reactive_function);
		
		observer.observe(document.body, {
			characterData: true,
			attributes: true,
			childList: true,
			subtree: true
		});
		
		local_reactive_function();
		
	});
	
}

Надеюсь понятно расписано.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@strelkan
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы