JavaScript: создание и удаление условных кнопок

Question

Мне нужно решить проблему, которая звучит так:

У меня есть HTML-файл с:

1 вводом
1 выбором без значения
1 кнопка - 'Пуск '

После нажатия кнопки «Пуск» новые кнопки будут создаваться в течение 3–3 секунд с именами и идентификаторами «B1», «B2», «B3» до достижения введенного значения.во вводе.

Нажатие на кнопку, созданную таким образом, она исчезнет, ​​и ее идентификатор появится в качестве опции в select.

Это то, что я сделал до сих пор, но я нене знаю, как продолжить ..

window.onload
{
    document.getElementsByTagName("button")[0].onclick = function ()
    {
        if(document.getElementsByTagName("input")[0].value > 0)
          {
              var i=1;
              var n = document.getElementsByTagName("input")[0].value;

              var addButtons = setInterval(function() 
              { 

                if(i==n) clearInterval(addButtons);

                var button = document.createElement("BUTTON");
                button.setAttribute("id", "b"+i);

                document.body.appendChild(button);

                i=i+1;

              }, 3000);
          }
    };

}

Answer 1

1- Вместо использования document.getElementsByTagName используйте document.querySelectorAll из-за проблем с производительностью.

2- Определите этот прослушиватель событий для каждой новой кнопки

button.addEventListener('click', function(e) {
  e.target.style.display = 'none';
  var option = document.createElement('option');
  option.innerHTML = e.target.name;
  document.querySelectorAll("select")[0].append(option)
});

Полный код

document.getElementsByTagName("button")[0].onclick = function() {
  if (document.getElementsByTagName("input")[0].value > 0) {
    var i = 1;
    var n = document.getElementsByTagName("input")[0].value;

    var addButtons = setInterval(function() {

      if (i == n) clearInterval(addButtons);

      var button = document.createElement("BUTTON");
      button.setAttribute("id", "b" + i);
      button.setAttribute("name", "b" + i);
      button.innerHTML = "B" + i;

      button.addEventListener('click', function(e) {
        e.target.style.display = 'none';
        var option = document.createElement('option');
        option.innerHTML = e.target.name;
        document.querySelectorAll("select")[0].append(option)
      });

      document.body.appendChild(button);

      i = i + 1;

    }, 3000);
  }
};

<button>Click me</button>

<input type="number" />

<select></select>