querySelectorAll

A live nodelist using querySelectorAll.

 

Click a list entry to remove it. Use the developer tools to add and remove elements. It's not the click/sumbit handlers, it's the live node list that triggers the changes.

 

Add new Items
New items are red when added to the list. They turn green after the added event was triggered
Time waited after a list item was added. Everything <=20ms should add the items in batches.

Fancy list
item(s)

The code (excerpts)

var listEl = document.getElementById('query-selector-all-list'),
    nodeList = watched(listEl).querySelectorAll('.watched-item');

var updateList = function () {
  countEl.textContent = nodeList.length; //update count
  nodeList.forEach(function (el, index) {...}); //update every item
};

// Listen to the lists update events
nodeList.on('added', function (addedElements) {
  updateList();
});
nodeList.on('removed', function (addedElements) {
  updateList();
});