I have this javascript code to add and remove the added lines.
function adicionar() {
var itm = document.getElementById("itens").getElementsByClassName("div-bloco-form")[0];
var cln = itm.cloneNode(true);
var inputs = cln.getElementsByTagName("input");
for (i = 0; i <= inputs.length - 1; i++) {
if (inputs[i].type === "text")
inputs[i].value = "";
}
document.getElementById("itens").appendChild(cln);
}
function remover(btn) {
var div = btn.parentNode;
var divBloco = div.parentNode;
if (numLinhas() > 1)
divBloco.remove();
}
function numLinhas() {
var linhas = document.getElementById("itens").getElementsByClassName("div-bloco-form");
return linhas.length;
}
And then the calls on the
<div id="itens">
<div class="div-bloco-form">
<br>
<label class="obrigatorio" style="width: 200px;">Data de entrega:</label>
<input type="text" name="dataentrega[]" readonly/><br>
<label class="obrigatorio" style="width: 200px;">Quantidade:</label>
<input type="text" name="quantidade[]" readonly oninput="calcularTotal(this.parentNode);"/><br>
<label class="obrigatorio" style="width: 200px;">Produto:</label>
<select name="idcadastro_produtos"></select><br>
<label class="obrigatorio" style="width: 200px;" >Preço unitário (R$):</label>
<input type="text" name="precounitario[]" readonly oninput="calcularTotal(this.parentNode);"/><br>
<label style="width: 200px;">Preço total (R$):</label>
<input type="text" name="precototal[]" readonly/>
<input type="button" value="+" class="btn-adicionar" title="Adicionar mais uma linha." onclick="adicionar();"/>
<input type="button" value="-" class="btn-remover" title="Remover esta linha." onclick="remover(this);"/>
</div>
</div>
And what is happening is that the moment I click to remove, it does not delete only the cloned block, but erases all the blocks. Does anyone know what I can do to fix it?
Thanks.