Adicionar Elementos dinamicamente com jQuery

Nessa vídeo-aula aprenderemos a como adicionar elementos dinamicamente na página utilizando jQuery, e também exclui-lo. Espero que gostem, e boa aula.




Se o conteúdo foi relevante para você, e desejar, você pode incentivar fazendo uma doação.

41 thoughts on “Adicionar Elementos dinamicamente com jQuery

  1. Prezado David.
    Gostei muito da sua aula de como fazer combo dinâmico pra Estado e Cidade. Meus parabéns.

    A minha dúvida é a seguinte.
    Eu estou fazendo um CMS, na realidade alterando o mesmo, visto que eu usava Ajax integral, e agora quero usa jQuery.

    Como eu faria para recuperar os dados de Estado, Cidade e Bairro, por exemplo, de um cadastro de clientes, e mostrar dentro dos combos respectivos, porém carregando todos os outros dados?

    Assim.. ESTADO ; CIDADE ; BAIRRO , porém preenchendo todos os outros estados, cidades e bairros.
    Entendeu mais ou menos?

    O meu problema é na hora de alteração dos dados, daí preciso recuperar o que está cadastrado.

    Se possível, mande resposta, ou me dê uma luz, kkkkkkkk

    Obrigado e parabéns.

  2. Ola David rapaz ja fiz esse codigo e ele nao funciona na de deletar olha ai o meu

    $(function(){
    $(“#add”).click(function(){
    var input = ”;
    input += ‘Proldutos: ‘;
    input += ‘ Qtd: ‘;
    input += ‘X ‘;

    $(“#campos”).append(input);
    return false;
    });

    $(“.del”).Live(“click”,function(){
    $(this).parent().remove();
    return false;
    });

    });

    1. Na versão 1.11 do Jquery a função .live não está mais funcionando. No próprio site do desenvolvedor, diz para substituir por “.on”.
      Modifiquei e funcionou. A linha que contém o .live ficou assim:

      $(document).on(‘click’, ‘.del’ ,function(){

  3. $(function(){
    $(“#add”).click(function(){
    var input = ”;
    input += ‘Proldutos: ‘;
    input += ‘ Qtd: ‘;
    input += ‘X ‘;
    $(“#campos”).append(input);
    return false;
    });
    $(“.del”).Live(“click”,function(){
    $(this).parent().remove();
    return false;
    });
    });

  4. Fala David, cara ótima aula, lendo seus artigos e apenas fazendo um comentário me referindo à um onde falava sobre Popularidade das vídeo aulas, o que torna sua as aulas produtivas é a sua didatica, a forma de explicação de cada etapa da aula.
    Agora falando dessa em questão, gostaria de dizer que ela me foi muito útil e que embreve vou usar o que aprendi num plugin que estou fazendo para WordPress, depois posto o resultado para sua avaliação. abraços!!!

    1. Olá Evandro, muito obrigado, Desculpa a demora em responder, tô numa correria tremenda, nem consegui mais gravar aula ou escrever artigos, isso tô sentido falta de fazer, mas uma hora eu consigo, rs.

      Quando vc terminar o plugin, me passa o link pra ver funcionando. abrs

  5. Bom dia David,muito boa e útil a sua videoaula! Porém estou com um grande problema,você poderia me ajudar?
    Eu preciso adicionar combos ao invés de texts e essas combos já vem preenchidas do banco de dados… Eu tentei fazer desta forma,mas não funcionou…Você poderia me ajudar?

    Segue código

    novadiv.innerHTML =”Origem:SELECIONE UMA ORIGEM”+”selecionarbusca($busca);while($rowLoc=mysql_fetch_object($obj->rs)){?>”+”<option value="+"CLINICA; ?>”+”CODIGO == $rowLoc->origem){ ?>”+” selected=”selected” “+””+”>”+”CLINICA; ?>”+””+””+””;

    1. Ruth, nesse caso vc poderia fazer talvez de uma maneira mais simples, do q fiz na video aula, você pode utilizar o clone, onde ele vai copiar um conteudo que você definir.

      http://jsfiddle.net/W52M8/

      Veja que no HTML criar uma div chamado #fieldsHidden – que terá declarado no css como display:none – onde terá o conteúdo que será copiado, no caso coloquei apenas um select, mas colocar qualquer item.

      No formulário, tem uma div chamado #alvo, onde será adicionado o conteúdo dinamicamente.

      E o jQuery ele apenas copia o conteudo q está #fieldsHidden, onde englobei com div.form, pra facilitar a manipulação depois.

      1. Olá! tudo bem?
        Essa explicação me ajudou bastante, mas preciso tambem de um botão que remova o que foi clonado. Como faço?

          1. Esse não deu certo =/ acho que estou fazendo algo errado aqui. pode me chamar no skype? Preciso de ajuda!! kkk se não for incomodar =D

          2. Alice, não vou consegui entrar no skype pq estou na correria pra entregar alguns trabalhos. Mas criei um código de adicionar elementos dinamicamente e remover o elemento, utilizando o jQuery mesmo, o código está comentado, você pode copiar e add um arquivo html, e visualizar o funcionamento, e o código está todo comentário pra q vc consiga entendê-lo

            https://gist.github.com/davidchc/517044912e4b9b18b1220bd88e389ab4

            Ou vc pode visualizar o funcionamento por aqui:

            https://jsfiddle.net/xpvt214o/647877/

            Espero que te ajude.

  6. olá será que teria como vc me ajudar na seguinte questão:
    como faço para referenciar em loop todos os elementos de uma lista dinâmica de Javascript

    // abaixo a função que faz a soma de uma linha ex: valor unitario * quantidade – desconto = valor total
    function somar(){

    vLista = document.getElementById(“valor_unitario[]”);

    vValor_unitario = document.getElementById(“valor_unitario”).value;

    vQuantidade = document.getElementById(“quantidade[]”).value;
    vDeducao = document.getElementById(“desconto[]”).value;
    for (var cont = 0; cont <= (vLista.size); cont ++) {
    r = ( Number(vValor_unitario) * Number(vQuantidade) – Number(vDesconto) );
    alert ("teste");
    cont = result;
    result = r;

    s = Number(vQuantidade);

    x = Number(vDesconto);

    document.getElementById("total[]").value = r.toFixed(2) ;

    document.getElementById("valor_produtos").value = r.toFixed(2);

    document.getElementById("quant_produtos").value = s.toFixed(2);
    document.getElementById("desconto_itens").value = x.toFixed(2);

    }
    }

    // a baixo o codigo que insere as linhas da nota automaticamente…

    $("#add").click(function(){
    var i = 1;
    var select = '’;
    var input = ”;
    input +=’ ————–SELECIONE UM PRODUTO—————- <option value= "” > &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp ‘
    input +=’ &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp ‘

    input +=’ &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp’

    input +=’ &nbsp &nbsp’

    input +=’ &nbsp &nbsp &nbsp’
    input +=’X
    input +=”

    $(“#campos”).append(input);

    return false;
    });

    $(‘.del’).live(‘click’,function(){
    $(this).parent().remove();
    });

    });

    1. // a função que insere as linhas automaticas é essa:

      $(“#add”).click(function(){
      var i = 1;
      var select = ”;
      var input = ”;
      input +=’ ————–SELECIONE UM PRODUTO—————- <option value= "” > &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp ‘
      input +=’ &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp ‘

      input +=’ &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp’

      input +=’ &nbsp &nbsp’

      input +=’ &nbsp &nbsp &nbsp’
      input +=’X
      input +=”

      $(“#campos”).append(input);

      return false;
      });

      $(‘.del’).live(‘click’,function(){
      $(this).parent().remove();
      });

      });

  7. Oi Chc.

    Cara não sei se você pode me ajudar, essa sua aula me ajudou tanto… poxa;

    mas eu queria te pedir uma coisa:

    Seu tivesse uma variável com um valor, ex: 100. E que os campos que eu fosse adicionando diminui-se pela variável.

    Ex:
    A variável vale 100 e eu adicionei três campos. Digitei 25, 25 e 50, esses valores diminuiria pela variável dando 0. Teria como fazer isso???

    Obrigado

    1. Fabio, mas nesse caso isso ficaria visivel, exemplo, tem um input com o valor 100, e cada novo campo adicionado, e com valor diminuiria o valor do input com valor 100?

  8. Ola David.

    Gostei muito da Video Aula, com certeza adquiri mais conhecimento com ela.

    MAs amigo, tentei fazer isso com um menu list que recebe as opções de um BD via Recordset, imaginei que copiando o label junto com o funcionaria, me dei mal.

    Você saberia dar a solução para isso, segue o que fiz na função do jquery:

    $(function(){
    $(“#add”).click(function(){
    var input = ”;
    input += ‘Produto:

    <option value="”>
    0) {
    mysql_data_seek($rsProduto, 0);
    $row_rsProduto = mysql_fetch_assoc($rsProduto);
    }
    ?>
    ‘;
    input += ‘ Valor: ‘;
    input += ‘ Quantidade: ‘;
    input += ‘ X ‘;

    $(“#campos”).append(input);
    return false;
    });

    $(‘.del’).live(‘click’, function(){
    $(this).parent().remove();
    });
    });

      1. Então David, resolvi usar o Clone Jquery, mais prático.

        Consegui listar os produtos que vêm da Ricordset (BD produtos).

        Bem agora estou as voltas de em vez de criar um print eu gravar o resultado no BD de orçamento.

        Até agora consegui gravar nome de cliente, cidade, data, tudo que era um input único NÃO CLONADO no bd, pois o clone não rola só vai o primeiro clone.

        Conversando com um amigo ele me aconselhou usar o var_dump, entretanto não consigo gerar a lista de produtos e coloca-la na Tabela do BD.

        Qualquer novidade eu posto!

  9. Boa noite, amigo estou com um problema cara esse seu tutorial caiu certim para mim só que eu preciso colocar mais dois campos aí um chamado valor e um resultado e preciso fazer com o que quantidade * valor e o campo resultado receber o valor desse calculo, cara já procurei em vários sites e nenhum funciona corretamente, será que você pode me orientar, desde já obrigado.

    1. Cristiano, já tentou fazer algo do tipo assim:

      function getCalculate(){
         var total = 0;
         $(".fields").each(function(){
              total += parseInt($(this).find('.qtd').val()) * parseFloat($(this).find('.preco').val());
          });
         return total;
      }
      

      A ideia é chamar a função toda fez for fazer blur em alguma campo, chamar a função. No caso ele vai procurar uma div.fields, e dentro dela procurar uma class chamada .qtd e .preco, e faz o calculo. Não cheguei a testar, teoricamente daria certo, rs

      1. Ola tentei fazer esse exemplo funciona e não consegui.

        Gostaria de fazer automaticamente o calculo da quantidade * valor e mostrar em outro campo, assim que terminar de digitar os valores nos campos.

        Nao sei onde tem que chamar essa funcao getCalcule() se vc pode fazer um pequeno exemplo pratico pramim ficarei muita grata.

        Obrigada!

  10. Oi David,
    Mano, caso eu precise adicionar subprodutos para cada produto adicionado?

    Eu até consegui fazer, porém eu não consegui puxar, pode me ajudar? O que eu faço, coloco um foreach dentro do outro?

    Obrigado

      1. Show mano, porém eu tentei e mas e os “telefones extras” ficaram todos no segundo grupo… eu adicionei dois nomes e dois telefones extras para cada nome. Todavia no resgate ficou tudo no segundo nome…

        Vou continuar tentando por aqui… se eu consegui eu posto aqui… se você puder ver.

        Muito obrigado.

          1. Sim está vindo assim:
            Nome : Fulano 1
            Telefone : Telefone fulano 1

            Nome : Fulano 2
            Telefone : Telefone fulano 2

            Nome : Fulano 3
            Telefone : Telefone fulano 3
            ‘Tel. Extra : Telefone fulano 1.2
            ‘Tel. Extra : Telefone fulano 1.3
            ‘Tel. Extra : Telefone fulano 2.2
            ‘Tel. Extra : Telefone fulano 2.3
            ‘Tel. Extra : Telefone fulano 3.2
            ‘Tel. Extra : Telefone fulano 3.3

            Os telefones extras não ficam no seu “grupo”, tipo, eu não consigo fazer a referência para colocar no banco de dados. Eu gostaria que os nomes (no caso “fulano”) repetisse com os do seu grupo.

            Mais uma vez obrigado pela a atenção.

          2. Fabio, vc pode verificar no google chrome, no inspetor de elemento, está está inserindo o valor no índice, q no caso ele conta com essa função:

            function getTotalItems(){
                return $(".items").length - 1;
             }
            
  11. Olá, tudo bem?
    Primeiramente, ótima vídeo aula. Me deu uma mão e tanto com essa questão de campos dinâmicos! (:

    Bom… agora, a pergunta! (rsrs)

    Estou trabalhando com um plugin de máscara para moedas (o Mask Money). Como faço pra que esse plugin funcione nos meus campos dinâmicos? Eu tentei usar o live() na criação dos campos, mas não rolou.

    Obrigado.

    1. Adriano, tenta fazer each pra percorrer todos elementos e atribuir toda vez vc é inserido novo elemento.

      //ação de inserir mais itens
      $('.preco').each(function(){
        $(this).maskMoney('parametros');
      });
      
  12. Essa aula me ajudou muito, mas estou com uma dificuldade, queria conforme eu fosse adicionado as linhas, colocar um incremento. Sabe, Linha 1, linha 2, linha 3 e por ai vai, tem como fazer?

  13. Olá, muito bom a explicação, muito didático.
    Bom, minha duvida é o seguinte, fiz como no exemplo, mas na hora de adicionar no bd ele pega primeiro os input adicionados. Tipo:
    produto2, produto3, produto4, produto1. Esse produto1 é o input original. Tem allguma solução para isso?

  14. David obrigado pela aula, ótima explicação consegui fazer certinho e entender. Gostaria de tirar uma dúvida com você. Sua aplicação deu certinho e implementei da seguinte forma. Preenchimento automático porém só a primeira linha funciona. as outras que entendo que vem do array não funcionam. Vou colocar meu código pra vc entender melhor:

    $(document).ready(function(){
    $(“#id”).blur(function(){
    var id = $(“#id”).val();

    $(“#produto”).val(‘Aguarde’);
    $.ajax({
    type: “POST”,
    url: “function/insert.php”,
    data: “id=”+ id,
    success: function(val){
    $(“#produto”).val(val);

    }
    });
    return false;
    });
    });

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *