<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
button{
cursor: pointer;
margin-left: 10px;
font-weight: bold;
}
button:hover{
color: blue;
}
div{
padding: 5px 0px;
}
#setNumberBox span{
font-weight: bold;
cursor: pointer;
font-style: italic;
padding: 2px 0px;
}
</style>
</head>
<body>
<div>
<div>Add Number</div>
<div><input type="number" /><button>Add</button></div>
<div>Remove Number</div>
<div><input type="number" /><button>Remove</button></div>
<div id="setNumberBox"></div>
</div>
<script>
const set = new Set(),
setSize = 10,
box = document.querySelector('#setNumberBox'),
div = document.querySelector('div'),
btn = div.querySelectorAll('button'),
ttl = 'title="Remove this number from the list"';
while( setSize > set.size ) set.add( rand(10, 2000) );
printSet([...set]);
div.addEventListener('click', function(e){
const trg = e.target;
if( trg === btn[0] ){
const inp = trg.closest('div').querySelector('input'),
val = inp.value,
nums = [...box.querySelectorAll('span')].map( x => x.textContent );
if( !val ) return;
if( !nums.filter( x => x == val ).length ){
box.insertAdjacentHTML('afterbegin', `<span ${ttl}>${val}</span><br />`);
}
inp.value = '';
}
if( trg === btn[1] ){
const inp = trg.closest('div').querySelector('input'),
val = inp.value;
if( !val ) return;
[...box.querySelectorAll('span')].filter( x => x.textContent == val ).forEach( z => z.click() );
inp.value = '';
}
if( trg.tagName == 'SPAN' ){
trg.nextSibling?.remove();
trg.remove();
}
});
function rand(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
function printSet(s){
box.innerHTML = s.map( x => `<span ${ttl}>${x}</span>` ).join('<br />');
}
</script>
</body>
</html>
