Doubt in an onclick Javascript event

2

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.

    
asked by anonymous 27.04.2017 / 16:39

1 answer

1

Just change its 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>
    
27.04.2017 / 17:00