limpiar un grupo de imagnes de un div

[orion126]

Buenas noches, recurro a ustedes ya que he buscado e intentado formas par poder lograr lo siguiente:

he escrito este peuqueño script, que consiste:

*primero, generar un numero random de cuatro digitos

*segundo, ese random lo transformo en un string.

*trecero, el string lo transformo y separo para transformala en un array

*cuarto, declaro el array

*quinto, tomo el array (cuatro numeros) y lo recorro, cada vez que encuentre un numero del 0 al 9, es decir se encontro con un 1, le asigna la imagen num_uno.jpg si encontro el dos asigna num_dos.jpg y asi sucecivamente.

*sexto, aqui el problema, toda esta funcion es llamada por un boton, y cada vez que presiono el boton se mellena de images consecutivas, lo que qiuero lograr es que si presiono el boton se genere un grupo de cuatro imagenes de cuatro numeros, y que cuando nuevamente vuelva a presionar el boton las primeras imagenes generadas se limpien y queden las ultimas, pero no he podido lograrlo, he intentado utilizar "removeChild("imagen")", pero no logro limpiar el div correctamente, por eso recurro a su ayuda.

La idea con esto es que un visitante genere un numero aleatorio y que este numero lo ingrese un formulario de acceso, para validar la visita, se que existen los captchas, pero no deseo utilizar librerías externas, solo intentar una validación diferente, ahora no se si seria lo mas prudente o una forma errónea, agrego el código,


gracias

Código:

function aleatorios(){

  

  var aleatorio = Math.floor(Math.random() * (10000 - 1000+1)+1000);//numero random entre dos mumeros

  document.getElementById('alea').value= aleatorio;
   
   var texto=aleatorio.toString(); //convierto el numero a un string o cadena de texto

   var cadena = texto.split("");//la cadena la separo para transformarla en un arreglo o array

   var arreglo=[cadena];
    
   var i;
   for(i=0;i<cadena.length;i++){//recorro el array y tomo los valores de cada posicion
    

     var imagen0= document.createElement("img");
     var imagen1= document.createElement("img");
     var imagen2= document.createElement("img");
     var imagen3= document.createElement("img");
     var imagen4= document.createElement("img");
     var imagen5= document.createElement("img");
     var imagen6= document.createElement("img");
     var imagen7= document.createElement("img");
     var imagen8= document.createElement("img");
     var imagen9= document.createElement("img");
     

    if(cadena[i]==0)

      imagen0.setAttribute("src", "img/num_cero.jpg");//agregor el src de la imagen (la ruta de donde se encuetra).
      
     var bloq=document.getElementById("bloque0"); //tomo  la referencia al elemento de bloque. de aqui en adelante igual para todas.
          bloq.appendChild(imagen0);


       if(cadena[i]==1)
     imagen1.setAttribute("src", "img/num_uno.jpg");
   var bloq=document.getElementById("bloque0"); 
     bloq.appendChild(imagen1); 

    if(cadena[i]==2)
     imagen2.setAttribute("src", "img/num_dos.jpg");
   var bloq=document.getElementById("bloque0"); 
     bloq.appendChild(imagen2); 

    if(cadena[i]==3)
     imagen3.setAttribute("src", "img/num_tres.jpg");
   var bloq=document.getElementById("bloque0"); 
     bloq.appendChild(imagen3); 

    if(cadena[i]==4)
      imagen4.setAttribute("src", "img/num_cuatro.jpg");
      var bloq=document.getElementById("bloque0"); 
     bloq.appendChild(imagen4);  

    if(cadena[i]==5)
      imagen5.setAttribute("src", "img/num_cinco.jpg");
       var bloq=document.getElementById("bloque0"); 
        bloq.appendChild(imagen5); 

    if(cadena[i]==6)
      imagen6.setAttribute("src", "img/num_seis.jpg");
    var bloq=document.getElementById("bloque0"); 
     bloq.appendChild(imagen6); 

    if(cadena[i]==7)
      imagen7.setAttribute("src", "img/num_siete.jpg");
      var bloq=document.getElementById("bloque0"); 
      bloq.appendChild(imagen7);  

    if(cadena[i]==8)
       imagen8.setAttribute("src", "img/num_ocho.jpg");
       var bloq=document.getElementById("bloque0"); 
       bloq.appendChild(imagen8); 

    if(cadena[i]==9)
      imagen9.setAttribute("src", "img/num_nueve.jpg");
      var bloq=document.getElementById("bloque0");
       bloq.appendChild(imagen9);  
          
   }
   image = document.getElementById("bloque0"); //por aca intento limpiar el div para que cuando se presione el boton no se llenen de imagenes la pagina
       if (!image){
    alert("El elemento selecionado no existe");
      } else {
       padre = image.parentNode;
       padre.removeChild(image);
      }

    
}