Boas tenho neste momento o seguinte código em jquery para adicionar inputs conforme o numero existente numa caixa de texto,
No entanto caso no formulário já exista por algum campo ao clicar para adicionar mais um é apagado todos os campos e o seu conteúdo e inserido novos campo em branco,
É possível quando por exemplo, a caixa de texto estiver em 5 e com o conteúdo preenchido eu ao clicar para adicionar apenas mais um ou seja um total 6 ele apenas adicionar e não apagar os que já existem, e caso pretenda retirar um ele apenas eliminar a ultima entrada?
Segue o código que tenho de momento
$(document).ready(function() {
var $txtQuantidade = $('#txtQuantidade');
var $btnAdicionar = $('#btnAdicionar');
var $divForm = $('#divForm');
$btnAdicionar.on('click', function() {
var qtde = $txtQuantidade.val();
console.log(qtde);
var html = '';
for (var i = 0; i < qtde; i++) {
html += '<div>';
html += '<input type="date" id="txtData_' + i + '" name="data[]">';
html += '<input type="time" id="txtHoraIni_' + i + '" name="hinicio[]">'
html += '<input type="time" id="txtHoraFim_' + i + '" name="hfim[]">';
html += '<div>';
}
$divForm.html(html);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txtQuantidade" />
<input type="button" id="btnAdicionar" value="Adicionar" />
<div id="divForm"></div>
.html()
sobrescreve tudo que há no contexto do objeto. Utilize o método.append()
.