Publicado em 24 de mar.

Clonar e remover input

#javascript #appendchild #deletar #remover

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

Discussão (4)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carregando comentários...

**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çã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