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