Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

meyer

Clonar e remover input

Por , em Javascript

Recommended Posts

meyer    0

meyer
Postado

Olá, pessoal!

 

Comecei a trabalhar com programação há pouco tempo e sou novo no fórum. Peguei um código que clona um input, porém para remover o input clonado, na primeira vez que clico em remover o botão não faz nada, mas depois do primeiro clique ele funciona normalmente. Como fazer para que o botão remover funcione logo de primeira?

 

Segue o código:

 

No <head>:

 

<script>
    function duplicarCampos() {
        var clone = document.getElementById('origem').cloneNode(true);
        var destino = document.getElementById('destino');
        destino.appendChild(clone);
        var camposClonados = clone.getElementsByTagName('input');
        for (i = 0; i < camposClonados.length; i++) {
            camposClonados.value = '';
        }
    }
    function removerCampos(id) {
        var node1 = document.getElementById('destino');
        node1.removeChild(node1.childNodes[0]);
    }
</script>

 

No <body>:

 

<form method="post" action="action_obs.php">
    <div class="row">
        <div class="col-md-6">
            <div id="origem">
                <input type="text" class="form-control" id="observacao" name="observacao[]" placeholder="Nova observa&ccedil;&atilde;o"><br>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <input type="button" class="btn btn-default" value="Adicionar campo" onClick="duplicarCampos();">
            <input type="button" class="btn btn-default" value="Remover campo" onClick="removerCampos(this);">
            <input type="hidden" name="id" value="<?php echo $dados[15] ?>">
            <input type="submit" class="btn btn-success" value="Salvar"><br><br>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div id="destino">
            </div>
        </div>
    </div>
</form>

 

Alguém pode me ajudar com isso? Obrigado.

 

Rob Niemeyer

Compartilhar este post

Link para o post
Compartilhar em outros sites

gabrieldarezzo    255

gabrieldarezzo
Postado

Primeiro  

<input onClick="duplicarCampos();">  <!-- Errado -->

<input onclick="duplicarCampos();"><!-- Certo -->

Oq está quebrando suas pernas é isso aqui:

https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType

 

 

No ato de fazer o Delete.

Você está pegando um node  

var node1 = document.getElementById('destino');
node1.removeChild(node1.childNodes[0]);

 

No seu caso se você der um console.log() nesse cara aqui: 

var node1 = document.getElementById('destino');

Vai retornar os dois:

ELEMENT_NODE

e

TEXT_NODE

 

E esse é o motivo de precisar clicar 2x.

No primeiro click é excluido o TEXT, no segundo o próprio elemento.

 

 

Simplifiquei o seu exemplo e criei um fiddle pra você ver a magica acontecer.

https://jsfiddle.net/g5fhjyfz/

 

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

gabrieldarezzo    255

gabrieldarezzo
Postado

Apesar que da pra simplificar bastante e abstrair esse problema dos nodes.

 

Ex: 

document.getElementById("btn-remove").addEventListener("click", function() {
	var inputs = document.getElementById("conteudo");
	inputs.removeChild(inputs.lastChild);
});

Live demo:

https://jsfiddle.net/g5fhjyfz/1/

Compartilhar este post

Link para o post
Compartilhar em outros sites

meyer    0

meyer
Postado

Olá, Gabriel!

Agradeço pela atenção!

O problema é que seu código não está clonando o input existente, só criando novos inputs, e eu preciso clonar.

Mas obrigado pela correção e pelo exemplo!

Um abraço.

 

Rob Niemeyer

Compartilhar este post

Link para o post
Compartilhar em outros sites

gabrieldarezzo    255

gabrieldarezzo
Postado

O exemplo tem escopo reduzidos.

Mas a explicação sobre nodeType foi em cima do seu código.

 

De qlq forma tenta pegar o simplificado e adaptar ao seu código.

 

Já q são duas funções diferentes, uma é clonar (que no seu funcionava)

 

E a outra é a excluir ;)

 

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • ILR master
      Carregamento preloading
      Por ILR master
      Fala pessoal, tudo bem?
       
      Tô tentando fazer um pre-loading, mas não consigo de jeito algum.
      Quero mostrar uma animação enquanto a página é carregada e depois de caregada, esconder a animação e mostrar conteúdo.
       
      Aguém pode me ajudar?
       
      Segue código abaixo
       
       
      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
          <title>PÁGINA LOAD</title>

      <style type="text/css">
      .loadclass {
          border: 2px solid #f3f3f3; /* Light grey */
          border-top: 4px solid #ffc401; /* Blue */
          border-radius: 50%;
          width: 50px;
          height: 50px;
          animation: spin 2s linear infinite;
      }
      @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
      }
      .conteudo {
          display:none;
      }
      </style>
      <script>
          function loading(){
              document.getElementsByClassName('loadclass')[0].style.display="none";
              document.getElementsByClassName('conteudo').style.display="block";
          }
      </script>
      </head>
      <body onLoad="loading()">
      <div class="loadclass"></div>
      <div class="conteudo">SEU CONTEUDO AQUI DENTRO!!!</div>
      </body>
      </html>
    • ILR master
      Abrir url na mesma janela
      Por ILR master
      Pessoal, pergunta bem simples. Abaixo tenho o seguinte código:
       
      <script>
      function alerta()
      {
        if (window.confirm("Você realmente quer sair?")) {
          window.open("sair.html");
      }
      }
      </script>
       
      Funciona perfeitamente, só que está abrindo em outra janela e quero que abra na mesma janela.
       
      Alguém pode me ajudar?
    • Giovanird
      Atualizar pagina PHP que esta dentro de uma div
      Por Giovanird
      Olá a todos!
      Tenho uma pagina que possui uma DIV onde coloquei uma pagina PHP.
      Uso a função setInterval para atualizar a pagina inclusa dentro da DIV.
      O problema é que ao acessar o site , a DIV só me mostra a pagina inclusa somente quando completo o primeiro minuto.
      Preciso que a pagina inclusa já inicie carregada
       
      Meu código JavaScript e a DIV com a pagina PHP
       
      <script> function atualiza(){ var url = 'direita.php'; $.get(url, function(dataReturn) { $('#direita').html(dataReturn); }); } setInterval("atualiza()",60000); </script> <div> <span id="direita"></span> </div>  
    • Thiago Duarte
      Drag and Drop para arrastar imagem
      Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • belann
      Upload de arquivos com javascript
      Por belann
      Olá!
       
      Estou fazendo o upload de arquivos com fetch dessa forma
      fetch(url, {
              method: 'POST',
              headers: {'Content-Type': 'multipart/form-data',},
              body: formData 
          }).catch((error) => (console.log("Problemas com o Upload"), error));
       
      estou usando input type=file
      e criando uma const formData = new FormData(); 
      mas não faz e não dá nenhum erro.
      estou fazendo o upload com a url="http://localhost/dashboard/dados".
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito