Doubt in a Javascript onclick event

Question

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 buttons

<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’s happening is that the moment I click to remove it, it doesn’t just erase the cloned block, it erases all the blocks. Does anyone know what I can do to fix?

Thanks.

Answer 1

Just change your function, you are removing two Divs above the button that would be the div that contains everything. See:

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;

    if (numLinhas() > 1)
        div.remove();
}

function numLinhas() {
    var linhas = document.getElementById("itens").getElementsByClassName("div-bloco-form");
    return linhas.length;
}

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