Permitira agregar mas input, a medida que se requieran. Esta dividido en 2 partes, la parte HTML y js.
<!doctype html>
<html>
<head>
<title>Input Dinamico</title>
<script src="jquery-3.1.0.min.js"></script>
<script src="Clase7_InputDinamico.js"></script>
</head>
<body>
<h1>Input Dinamico</h1>
<h2>Datos Personales</h2>
<tr>
<td>Patente</td>
<td><input type=text class=txtPatente
maxlength=6 size=6 placeholder="Ej: AB1235">
</td>
</tr>
<tr>
<td>Cantidad de dueños</td>
<td><input type=text class=txtDuenos maxlength=2 size=1>
<input type=button class=btnAgregar value=Agregar>
</td>
</tr>
<tr class=trDueno>
<td>Rut de dueños</td>
<td>
<input type=text name=txtRut[] class=txtRut0 maxlength=10>
</div>
</td>
</tr>
<tr>
<td>Opciones</td>
<td><input type=button class=btnLimpiar value=Limpiar>
<input type=button class=btnEnviar value=Enviar>
</td>
</tr>
</table>
</body>
</html>
Y el archivo .js (ver nombre para que lo tome)
$(function()
{
$(".trDueno").hide();
$(".btnAgregar").click(function()
{
if($(".txtDuenos").val() && $(".txtDuenos").val()!= "0")
$(".trDueno").show();
var cantidad = Number($(".txtDuenos").val());
if(cantidad == 1)
return;
for(var i = 1; i < cantidad; i++)
{
$(".contenedor").append('<br><input type=text name=txtRut[] class=txtRut' + i + ' maxlength=10>');
$(".contenedor").append('<input type=submit id="btnEliminar1" class="eliminar button' + i + '" value=->');
}
});
$("body").on('click','.eliminar', function()
{
var clase = this.className.replace("eliminar button", "");
$("body .contenedor .button" + clase).remove();
$("body .contenedor .txtRut" + clase).remove();
});
});
