<button id="btn-restart">Restart</button>
<button id="btn-delete">Delete extra</button>
<div id="container"></div>

#container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}
.block {
  width: 3em;
  height: 3em;
  background-color: #ccc;
  margin: 4px;
  text-align: center;
  line-height: 3em;
  font-family: Arial, Helvetica, sans-serif;
  color: #333;
}

const container = document.getElementById('container');

const create= () => {
  const N = 5 + Math.floor(Math.random() * 20);
  for (let i = 0; i < N; i++) {
    const el = document.createElement('div');
    el.classList.add('block');
    el.innerText = i + 1;
    container.appendChild(el);
  }
};

document.getElementById('btn-restart').addEventListener('click', () => {
  container.innerHTML = '';
  create();
});

document.getElementById('btn-delete').addEventListener('click', () => {
  const collection = container.querySelectorAll('.block');
  const { length } = collection;
  const tail = length % 4;
  if (!tail) return;
  [ ...collection ].slice(-tail).forEach(el => el.remove());
});


create();