0

Bom dia pessoal,

Estou precisando implementar em um projeto uma função em minha aba de Produtos, onde preciso adicionar(clonar) e remover as DIVs e fazendo o incremento do número dessas de maneira dinâmica através dos botões "Remover" e "Add" com JQuery. Preciso clonar a " div class='produtos-wrap'> " e fazer com que o número na DIV " div id='index'> " seja incrementado ou decrementado. Minha ideia inicial era que a pagina já abra com 3 dessas div e o usuário tenha a opção de adicionar ou remove-las, de acordo com sua necessidade.

Agradeço desde já a qualquer ajuda fornecida.

Meu código HTML:

<div class="container" id="produtos">
        <div class="separator"></div>

        <div class="title-padrao">
            <h1 class="text-center">Produtos</h1>
        </div>

        <div class="produtos-wrap">
            <div class=" text-center select_height">
                <b>Número:</b>
                <div id="index" class="font-pop">1</div>
            </div>

            <div class=" select_height" id="div_produtos">
                <b>Produto:</b>
                <select class="selectpicker form-control" data-show-subtext="false" data-live-search="true"
                        name="select_produtos" id="select_produtos" onchange="initProdutos()">
                    <?php
                    foreach ($result2 as $item_fornecedores) {
                        echo '<option data-subtext="' . $item_fornecedores['desc_produto'] . '" value="'
                            . $item_fornecedores['desc_produto'] . '">' . $item_fornecedores['desc_produto'] . '</option>';
                    }
                    ?>
                </select>
            </div>

            <div class="text-center select_height">
                <b>Embalagem:</b>
                <br>
                <input type="text" maxlength="2" class="edit-input font-pop" id="embalagem" name="embalagem" value="">
            </div>

            <div class="text-center select_height">
                <b>Preço:</b>
                <br>
                <input type="text" maxlength="5" id="preco" name="preco" class="edit-input font-pop">
            </div>

            <div class="text-center select_height">
                <b>Quantidade:</b>
                <br>
                <input type="text" maxlength="3" class="edit-input font-pop" value="0" id="quantidade-produto" name="quantidade-produto">
            </div>

            <div class="text-center select_height">
                <b>Preço do Produto:</b>
                <div id="preco-produto" class="font-pop">1</div>
            </div>

            <div class="text-center select_height">
                <a href="" id="remover">X</a>
            </div>
        </div>

        <button id="add">+</button>

    </div>

2 Respostas 2

-1

Com Jquery eu utilizei o append e o remove. Aconselho utilizar um button para remover ao invés do (a href="" id="remover")

  $(document).ready(function(){
     $("remover").click(function(){
         $("#id_do_elemento_que_deseja_remover").remove();
     });
     $("#add").click(function(){
         $("#produtos").append("<div><p>aqui você cria os seus elementos</p></div>");
     });
});
4
  • Criei a tag "a" apenas para deixa-la como exemplificação do button, mas enfim, vou testar a função por aqui e dou um feedback do resultado. Alias, teria como colocar a incrementação do número da DIV nesta função ?
    – leozera
    Commented 23/05/2019 às 13:31
  • O botão de Add funcionou, mas o de remove não da muito certo, pois ele exclui todas as divs anteriores, preciso que ele exclua apenas o ultimo indice criado, ou no caso, a ultima div. Pra isso, creio que a incrementação seja necessária.
    – leozera
    Commented 23/05/2019 às 13:39
  • Na verdade o add não funcionou muito bem kkkk, ele adiciona tudo menos as parte com PHP, o que faz com que não traga os produtos nem nada na DIV criada.
    – leozera
    Commented 23/05/2019 às 13:54
  • Você pode utilizar o clone, ele vai replicar as mesmas informações que possui na DIV que deseja clonar. Mas os valores serão fixos, se deseja criar com valores diferentes você deve tentar algo diferente. O caso do remove: ele faz a exclusão pois você está criando vários elementos com o mesmo ID, tenta inserir um id diferente para cada cópia
    – hspaalves
    Commented 23/05/2019 às 14:35
-1

Como comentei, você pode tentar usar o clone.

$(document).ready(function(){
        $("#id_button").click(function(){
            $("#id_div_que_deseja_clonar").clone().appendTo("body");
        });
});

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 .