Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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çã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 NiemeyerApesar 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/](https://jsfiddle.net/g5fhjyfz/1/)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
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 ;)
Primeiro