listener на удаление элемента

197

07 февраля 2019, 02:50

Существуют ли какой либо стандартный Event на удаление исчезновение элемента из DOM. Что-то типа:

document.getElementById("someId")
  .addEventListener("misticEventThanElRemove", someFunction);

Не знаю что вставить вместо misticEventThanElRemove.

Или подскажите как обработать исчезновение/удаление элемента

Answer 1

Как мне известно, конкретно события нет, но есть, mutation observer - стандарт позволяющий следить за изменениями в dom дереве

Пример:

// boilerplate для демонстрации 
const ul = document.querySelector('ul'); 
const deleteBtn = document.getElementById('delete'); 
const createBtn = document.getElementById('create'); 
 
const createLi = () => { 
  const li = document.createElement('li'); 
  li.innerHTML = `Элемент списка ${ul.children.length + 1}`; 
   
  ul.appendChild(li); 
  if(deleteBtn.disabled) deleteBtn.disabled = false; 
} 
const deleteLi = () => { 
  const li = ul.children[ul.children.length - 1]; 
 
  ul.removeChild(li); 
  deleteBtn.disabled = !ul.children.length; 
} 
 
createBtn.onclick = createLi; 
deleteBtn.onclick = deleteLi; 
 
// А теперь добавим mutation observer 
const observer = new MutationObserver(mutations => { 
  mutations.forEach(mutation => { 
    if(mutation.addedNodes.length) console.log('Добавили элемент'); 
    else if(mutation.removedNodes.length) console.log('Удалили элемент'); 
  }); 
}); 
// Подписываем только на изменения дочернего дерева 
const config = {childList: true}; 
observer.observe(ul, config);

button { 
  margin: 5px 10px; 
}

<ul> 
  <li>Элемент списка 1</li> 
  <li>Элемент списка 2</li> 
  <li>Элемент списка 3</li> 
  <li>Элемент списка 4</li> 
</ul> 
<button id='delete'>Удалить элемент</button> 
<button id='create'>Добавить</button>