el número de inputs que existe siempre coincide con un número.

[educacanis]

Hola, tengo que la siguiente función en Javascript que me permite crear unos div con inputs según el número elegido en una lista/menú de un formulario:

Código Javascript:

function crear(obj) {
    var num
    var max = document.getElementById("tiradores").value;
for (num=1;num<=max;num++) { 
  fi = document.getElementById('fiel');
  contenedor = document.createElement('div');
  contenedor.id = 'div'+num; 
  fi.appendChild(contenedor);
 
  ele1 = document.createElement('input');
  ele1.type = 'text';
  ele1.size = 5 ;
  ele1.name = 'fil'+num;
  contenedor.appendChild(ele1); 
  
  ele2 = document.createElement('input');
  ele2.type = 'text';
  ele2.size = 50 ;
  ele2.name = 'tir'+num;
  contenedor.appendChild(ele2); 
}
}
 

el formulario de donde elijo el número es el siguiente y me crea los campos es el siguiente:

Código HTML:

<label class="seccion">Número de Tiradores (participantes del club)
      <select name="tiradores" id="tiradores">
        <option value="1" selected="selected">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </label>
    <input type="button" value="Añadir" onclick="crear(this)" /> 

Si le doy sólo una vez al botón me muestra tantos campos como he puesto, sin embargo si le vuelvo a dar con el mismo número o cambiado me añade más campos, es decir si la primera vez elijo 2 y la segunda 3 me aparece un total de 5 campos, yo lo que quiero es que el número de campos siempre sea igual al value establecido, es decir si elijo el 5 me crea 5 campos, pero si cambio de opinión y elijo un 3 quiero que me borre 2 campos y sean sólo 3 (en vez de añadirme 3 y quedarme con 8)

espero haberme explicado y que me podáis ayudar, no sé como hacerlo.