2

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>

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.

0

1 Resposta 1

1

Basta mudar sua função, você está removendo duas divs acima do botão que seria a div que contem tudo. Veja:

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>

2
  • 1
    Outra coisa, não sei se vc reparou, mas os campos estão como readonly, por isso não é possível escrever neles. E eu recomendo que esse style com width: 200px seja definido num CSS. Fica bem mais limpo o código e mais fácil de dar manutenção. O <br> em cima dos campos também pode ser substituido por uma padding no CSS. Commented 27/04/2017 às 15:03
  • Bem lembrado irei fazer isso no css.
    – J.C. Ferri
    Commented 27/04/2017 às 15:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .