сбросить содержимое в контейнере при изменении выбора

Question

Я создал этот код JavaScript, который определяет значение (количество) тегов select и создает содержимое div на основе этого значения и добавляет их в контейнер, но когда я снова меняю значение, он продолжает работать, он не сбрасывается.

Код следующий:

const select = document.getElementsByTagName('select')[0];
const container = document.getElementById('container');
select.onchange = () => {
  for (let i = 0; i < Number(select.value); i++) {
    let content = document.createElement('div');
    content.classList.add('content');
    container.appendChild(content);
  }
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  height: 100vh;
}

.app {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 12% 88%;
  background: #5F9EA0;
}

select {
  width: 60px;
  height: 40px;
  background: red;
  color: #fff;
  font-size: 24px;
  border-radius: 10px;
  outline: none;
}

#container {
  width: 100%;
  height: 100%;
  background: darkcyan;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.content {
  width: 150px;
  height: 150px;
  border-radius: 15px;
  background: darkgreen;
  margin: 10px;
}

<div class="app">
  <select>
    <option>0</option>
    <option>3</option>
    <option>6</option>
    <option>9</option>
  </select>
  <div id="container"></div>
</div>

Как я могу сбросить содержимое перед добавлением другого содержимого?

Answer 1

вы видите при изменении, я удаляю все внутри контейнера, затем идет ваш лог c

const select = document.getElementsByTagName('select')[0];
            const container = document.getElementById('container');
            select.onchange = () => {
                container.innerHTML = "";
                for (let i = 0; i < Number(select.value); i++) {
                    let content = document.createElement('div');
                    content.classList.add('content'); container.appendChild(content);
                }
            } 

Answer 2

Думаю, это самый удобный способ. Каждый раз при нажатии на кнопку нужно очищать предыдущий раз

const select = document.getElementsByTagName('select')[0];
    const container = document.getElementById('container');
    select.onchange = () => {
        container.innerHTML = '';
        for (let i = 0; i < Number(select.value); i++) {
            let content = document.createElement('div');
            content.classList.add('content');
            container.appendChild(content);
        }
    }

Answer 3

Вы можете сделать что-то вроде этого: проверьте, что текущее значение select.value меньше или равно исходным квадратам, если оно истинно, вы удаляете их все, а затем добавляете новые квадраты в соответствии с выбранным числом

    const addSquares = select => {
  for (let i = 0; i < Number(select.value); i++) {
    let content = document.createElement("div")
    content.classList.add("content")
    container.appendChild(content)
  }
}
const select = document.getElementsByTagName("select")[0]
const container = document.getElementById("container")
select.onchange = () => {
  const squares = document.querySelectorAll(".content")
  const squareArr = Array.from(squares)
  const { value } = select
  if (value <= squareArr.length) {
    squareArr.forEach(function (node) {
      node.parentNode.removeChild(node)
    })
  }
  addSquares(select)
}

Answer 4

Вы можете сбросить контейнер, установив его внутреннюю HTML на пустую строку.

const select = document.getElementsByTagName('select')[0];
const container = document.getElementById('container');
select.onchange = () => {
  // reset
  container.innerHTML = "";

  for (let i = 0; i < Number(select.value); i++) {
    let content = document.createElement('div');
    content.classList.add('content');
    container.appendChild(content);
  }
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  height: 100vh;
}

.app {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 12% 88%;
  background: #5F9EA0;
}

select {
  width: 60px;
  height: 40px;
  background: red;
  color: #fff;
  font-size: 24px;
  border-radius: 10px;
  outline: none;
}

#container {
  width: 100%;
  height: 100%;
  background: darkcyan;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.content {
  width: 150px;
  height: 150px;
  border-radius: 15px;
  background: darkgreen;
  margin: 10px;
}

<div class="app">
  <select>
    <option>0</option>
    <option>3</option>
    <option>6</option>
    <option>9</option>
  </select>
  <div id="container"></div>
</div>