[SOLUCIONADO] Reestablecer el numero de contenedores

[saulrayados]

Buenas noches, tengo un formulario dentro de un contenedor que aparece las veces que el usuario desee, el problema es que si el usuario escribe otra cantidad, los contenedores se acumulan, por ejemplo si escribo 2 aparecen los 2 contenedores pero si escribo otra cantidad, siguen apareciendo los 2 contenedores mas los que haya puesto después, ¿como puedo hacer que al escribir otra cantidad los contenedores que ya estaban anteriormente se borren y aparezca solo la nueva cantidad?

Código HTML:

<label>¿cantidad de canciones a subir?</label>
<input type="number" id="num">
<button type="button" onclick="recibir();">Mostrar</button>
<h3 id="error" style="display:none;">Por favor escribe un valor valido</h3>
<br><br>
<div id="cont" style="display:none;">
  <h4 id="enc"></h4>
  <p><label>Titulo de la canción</label>
    <input type="text"></p>
  <p><label>Artista(s)</label>
    <input type="text"></p>
  <input type="checkbox">
  <label>Acepto los términos</label>
  <br><br>
  <button type="submit">Subir</button>
  <br><br>
</div>
 

Código Javascript:

function recibir() {
  var valor = document.getElementById("num").value;
  var container = document.getElementById("cont");
  var nulo = document.getElementById("error");
  
  // Clonar dentro del ciclo 
  if(valor <= 0) {
    nulo.style.display = "block";
  } else {
    for(i = 1; i <= valor; i++) {
      document.getElementById("enc").innerHTML = "Song #" + i;
      let nuevo = container.cloneNode(true); // El parámetro no debe ser un arreglo
      
      nuevo.id = 'div-nuevo-' + i;
      nuevo.style.display = "block";
      nuevo.style.border = "5px solid lightblue";
      nuevo.style.width = "20%";
      nuevo.style.marginTop = "20px";
      
      // Agrega el nuevo div al padre del contenedor
      container.parentNode.appendChild(nuevo);
    }
  }
}
 

[prueba230683]

Recuerda que el ID debe ser único en todo el documento, no se puede repetir.

Al clonar el contenedor con cloneNode(true), también estás clonando el <h4>, lo que produce que haya varios elementos con el mismo ID enc. Para evitar esto, lo más sencillo, es referenciar el elemento <h4> con nuevo.firstElementChild, sin necesidad de utilizar identificadores. Pero recuerda que el h4 debe ser el primer elemento del contenedor para que este método funcione.

Código HTML:

<label>¿cantidad de canciones a subir?</label>
<input type="number" id="num">
<button type="button" onclick="recibir();">Mostrar</button>
<h3 id="error" style="display:none;">Por favor escribe un valor valido</h3>
<br><br>
<div id="canciones"></div>
<div id="cont" style="display:none;">
  <h4></h4>
  <p><label>Titulo de la canción</label>
    <input type="text"></p>
  <p><label>Artista(s)</label>
    <input type="text"></p>
  <input type="checkbox">
  <label>Acepto los términos</label>
  <br><br>
  <button type="submit">Subir</button>
  <br><br>
</div>
 

Código Javascript:

function recibir() {
  var valor = document.getElementById("num").value;
  var container = document.getElementById("cont");
  var nulo = document.getElementById("error");
  
  document.getElementById("canciones").innerHTML = ""; // reseteamos lista de canciones
  
  // Clonar dentro del ciclo 
  if(valor <= 0) {
    nulo.style.display = "block"; // mostrar error
  } else {
    nulo.style.display = "none"; // ocultar error
    for(i = 1; i <= valor; i++) {
      let nuevo = container.cloneNode(true);
      nuevo.firstElementChild.innerHTML = "Song #" + i;
      nuevo.id = 'div-nuevo-' + i;
      nuevo.style.display = "block";
      nuevo.style.border = "5px solid lightblue";
      nuevo.style.width = "20%";
      nuevo.style.marginTop = "20px";
      
      // Agrega el nuevo div al padre del contenedor
      document.getElementById("canciones").appendChild(nuevo); // añadimos cancion a la lista
    }
  }
}
 

Adjunto una DEMO funcionando.

[saulrayados]

gracias, ya funcionó