reset contents in the container while select is on change

Question

I created this JavaScript code which detects the value (number) of select tags and creates div contents based on that value and appends them into the container, but when I change the value again it keeps going, it doesn't reset.

The code is the following:

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>

How can I reset the contents before adding the other contents?

Does this answer your question? [Remove all child elements of a DOM node in JavaScript](https://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript) — Kudlas, Jul 10 '20 at 13:46

score 2 · Answer 1 · answered Jul 10 '20 at 13:49

you see on change iam removing everything inside container then goes your logic

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);
                }
            }

score 1 · Accepted Answer · answered Jul 10 '20 at 13:43

You can reset container by setting its innerHTML to empty string.

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>

This might help you: https://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript — Lenny4, Jul 10 '20 at 13:44
Sorry @kudlas i no mean to disrespect your answer, just when i was posting my answer your answer was not loaded. if you want me to delte my answer, i will — Yerrapotu ManojKiran, Jul 10 '20 at 13:52

score 1 · Answer 3 · answered Jul 10 '20 at 14:05

You could do something like this: check if the current select.value is less or equal the original squares if true, you remove all of them and then add the new squares according to the number selected

    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)
}

score 1 · Answer 4 · answered Jul 10 '20 at 15:15

I think this is the most convenient way. Each time you click the button, you need to clear the previous time

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);
        }
    }

reset contents in the container while select is on change

4 Answers4