Skip to main content

Dúvida em um evento onclick Javascript

Tenho esse código javascript para adicionar e remover as linhas adicionadas.

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;
}

E depois as chamadas nos botões

<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>
            
                </div>

E o que está acontecendo é que no momento que eu clico para remover, ele não apaga apenas o bloco clonado e sim apaga todos os blocos. Alguém sabe o que posso fazer para corrigir?

Valeu.