digamos que tengo <ul> , necesito escuchar/ver cuando se eliminó y agregó un <li> .
Claro, puede usar un MutationObserver para observar cambios en un elemento DOM.
Su implementación es un poco compleja de describir en esta respuesta, pero el artículo de MDN debería proporcionarle toda la información que necesita.
Aquí hay un ejemplo artificial y parcialmente robado, para darle una idea:
const btnAdd = document.getElementById('btn-add'); const btnRemove = document.getElementById('btn-remove'); // Select the node that will be observed for mutations const targetNode = document.getElementById('some-id'); btnAdd.addEventListener('click', () => { const li = document.createElement('li'); targetNode.appendChild(li); }); btnRemove.addEventListener('click', () => { targetNode.removeChild(targetNode.children[0]); }); // Options for the observer (which mutations to observe) const config = { attributes: true, childList: true, subtree: true }; // Callback function to execute when mutations are observed const callback = function(mutationList, observer) { // Use traditional 'for loops' for IE 11 for (const mutation of mutationList) { if (mutation.type === 'childList') { console.log('A child node has been added or removed.'); } else if (mutation.type === 'attributes') { console.log(`The ${mutation.attributeName} attribute was modified.`); } } }; // Create an observer instance linked to the callback function const observer = new MutationObserver(callback); // Start observing the target node for configured mutations observer.observe(targetNode, config); <button id="btn-add">Add Item</button> <button id="btn-remove">Remove Item</button> <ul id="some-id"></ul>En realidad, no puedo entender tu pregunta por completo, pero hay una respuesta en mi mente:
let ul = []; ul[0] = Array.from(document.getElementById("myUl").children); ul[1] = ul[0].length; //Make an event to when to listen it eg setInterval if (ul[0] < ul[1].length) { console.log("an li removed"); } else if (ul[0] > ul[1].length) { console.log("an li added"); }