JSFiddle - React, Tailwind, and code Playground
HTML
<select id="stuffed">
</select>
<button id="filter1">Filter 1.6k - Move Nodes</button>
<button id="filter2">Filter 1.6k - Delete</button>
JavaScript
function buildList() {
var num = 0;
var sel = document.getElementById('stuffed');
sel.innerHTML = ""; // lazy
while (num++ < 10000) {
var option = document.createElement('option');
option.innerHTML = "Foo " + num;
option.value = num;
sel.appendChild(option);
}
}
function getFilterList() {
var list = [];
var rand;
for (var i = 0; i < 1600; i++) {
do {
rand = Math.random()*10000|0;
} while (list.indexOf(rand) >= 0);
list.push(rand);
}
return list;
}
document.getElementById('filter1').addEventListener('click', function(){
console.time('Cull - via Move');
var filter = getFilterList();
var filterHash = filter.reduce(function(o, v){ o[v] = true; return o; }, Object.create(null));
var optList = [];
var sel = document.getElementById('stuffed');
var l = sel.children.length;
while (l--) {
var opt = sel.children[l];
if (filterHash[opt.value]) {
optList.push(opt);
}
}
var docFrag = document.createDocumentFragment();
optList.forEach(function(node){
docFrag.appendChild(node);
});
console.timeEnd('Cull - via Move');
});
document.getElementById('filter2').addEventListener('click', function(){
console.time('Cull - via Delete');
var filter = getFilterList();
var filterHash = filter.reduce(function(o, v){ o[v] = true; return o; }, Object.create(null));
var optList = [];
var sel = document.getElementById('stuffed');
var l = sel.children.length;
while (l--) {
var opt = sel.children[l];
if (filterHash[opt.value]) {
sel.removeChild(opt);
}
}
console.timeEnd('Cull - via Delete');
});
buildList();