Ir para conteúdo

POWERED BY:

Arquivado

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

renatonp

Problema com removeChild

Por , em Javascript

Recommended Posts

renatonp    0

renatonp
Postado

Estou tentando criar uma lista com botões de Adicionar e Remover. Quando eu clico no Adicionar, ele adiciona numa boa, mas quando clico no Remover ele não remove.

 

Segue o código abaixo:

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

renatonp    0

renatonp
Postado 

<script type="text/javascript">
var i=1;
function adicionar()
{
   i++;
   if(i<10)
   {
      i="0"+i;
   }
    document.getElementById("div_formulario").innerHTML+="<P id='item"+i+"'><font face='Verdana' size=2 color='#FF7F00'>   <strong>Ítem "+i+":</strong></font><br /><br /><font face='Verdana' size=2 color='#FF7F00'>Quantidade para    impressão:</font> <input type='text' size=4 name='quantidade' id='quantidade'><br /><br /><font face='Verdana'    size=2>Selecione os arquivos de:</font><br /><font face='Verdana' size=2 color='#FF7F00'>Capa:</font> <input type='file'    name='arq_capa[]' id='arq_capa'><br /><font face='Verdana' size=2 color='#FF7F00'>Miolo:</font> <input type='file'    name='arq_miolo[]' id='arq_miolo'><br /><br /><font face='Verdana' size=2 color='#FF7F00'>Formatos:</font><br /><select    name='formato' id='formato'><option value=''>Selecione um formato</option><?php for($i=0;$i<$linhas_formatos;$i++) { $valor =    mysql_result($query_formatos,$i,'valor'); $descricao = mysql_result($query_formatos,$i,'descricao'); ?> <option value='<?=$valor?>'>   <?=$descricao?></option> <?php } ?> </select><br /><br /><font face='Verdana' size=2 color='#FF7F00'>Número de    páginas:</font>             <input type='text'    size=5 name='paginas' id='paginas'></P>";
}
function remover()
{
    if(i<10)
    {
        i="0"+i;
    }
    document.getElementById("div_formulario").removeChild(document.getElementById("item"+i));
}
</script>

 

O método adicionar funciona, mas o remover não.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Roberto Munhoz    0

Roberto Munhoz
Postado

Outro exemplo que achei na net:

 

<html>  
<head>
    <title>java script: Adicionar e remover campos dinamicamente!</title>  
<script language="JavaScript" type="text/javascript">   
/*
Script desenvolvido por: klonder
Postagem exclusiva em: http://www.forum.imasters.com.br
Liberado para uso e modificação.
*/

//Não altere esses valores!
var iCount = 0;
var iCampos = 1;
var hidden1;


//Definindo quantos campos poderão ser criados (máximo);
var iCamposTotal = 5;



//Função que adiciona os campos;
function addInput() {   
if (iCampos <= iCamposTotal) {
     hidden1 = document.getElementById("hidden1");
     
    //Criando uma variável que armazenará as informações da linha que será criada.
    //Os campos estão sendo colocados no interior de uma div, pois a linha contém muitos elementos;
    //Basta excluir a div, para excluir todos os elementos da linha;
    var texto = "<div id='linha"+iCount+"'><input type='text' name='texto"+iCount+"' id='texto"+iCount+"' value='Meu texto "+iCount+"'><input type='button' value='Apagar campo' onClick='removeInput(\"linha"+iCount+"\")'></div>";      
 
    //Capturando a div principal, na qual os novos divs serão inseridos:
    var camposTexto = document.getElementById('camposTexto');   
    camposTexto.innerHTML = camposTexto.innerHTML+texto;
 
    //Escrevendo no hidden os ids que serão passados via POST;
    //No código ASP ou PHP, você poderá pegar esses valores com um split, por exemplo;
        if (hidden1.value == "") {
            document.getElementById("hidden1").value = iCount;
        }else{
            document.getElementById("hidden1").value += ","+iCount;
        }
iCount++;
iCampos++;
}   
}
   
//Função que remove os campos;
function removeInput(e) {
   var pai = document.getElementById('camposTexto');
   var filho = document.getElementById(e);
   hidden1 = document.getElementById("hidden1");
   var campoValor = document.getElementById("texto"+e.substring(5)).value;
   var lastNumber = hidden1.value.substring(hidden1.value.lastIndexOf(",")+1);

   if(confirm("O campo que contém o valor:\n» "+campoValor+"\nserá excluído permanentemente!\n\nDeseja prosseguir?")){
        var removido = pai.removeChild(filho);
        //Removendo o valor de hidden1:
        if (e.substring(5) == hidden1.value) {
            hidden1.value = hidden1.value.replace(e.substring(5),"");
        }else if(e.substring(5) == lastNumber) {
            hidden1.value = hidden1.value.replace(","+e.substring(5),"");
        }else{
            hidden1.value = hidden1.value.replace(e.substring(5)+",","");        
        }
    iCampos--;
    }
}
</script>
</head>  

<body>  

<form  name="my_form" id="my_form" action="" method="post">  
<input type="button" value="Criar campo texto" name="add_input" id="add_input" onClick="addInput();">  
<div id="camposTexto"></div>
<br><br>Ajuste o campo abaixo para "hidden" no código-fonte.
<br>O valor passado será utilizado na página ASP ou PHP, por exemplo, servindo de controle dos ids passados:
<br><input name="hidden1" type="text" id="hidden1" value="">
</form>  

</body>  
</html>

Compartilhar este post

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

Informação importante

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

  Aceito