Remover elementos, criados dinamicamente, através do id da

Thabata Sá · Fevereiro 13, 2009

Boa tarde pessoal,

Estou precisando remover uma linha, de uma tabela, que contêm elementos criados dinamicamente pelo javascript, através do idda linha, acontece que ele está removendo apenas a última linha adicionada. Não conheço muito de DOM, por isso estou com dúvidas na sua sintaxe. Gostaria que alguém me ajudasse. Abaixo, o código:

Desde já, muito obrigada!

<html>  
<head> 
&lt;script language="JavaScript" type="text/javascript">
    var input_cont = 2;   
        
//**********************************************************************************************
//********************************* INICIA A FUNÇÃO PARA ADICIONAR ITENS ***********************
//***********************************************************************************************

function addItem(){  

    add_item_div = document.getElementById('add_item_div'); 
    linha = new Array();
    coluna1 = new Array();
    coluna2 = new Array();
    coluna3 = new Array();
    linha2 = new Array();
    coluna12 = new Array();
    
//Cria os elementos para construção da tabela
    table = document.createElement("table");
    linha[input_cont] = document.createElement("tr");
         coluna1[input_cont] = document.createElement("td");
         coluna2[input_cont] = document.createElement("td");
         coluna3[input_cont] = document.createElement("td");
    linha2[input_cont] = document.createElement("tr");
         coluna12[input_cont] = document.createElement("td");
        
    // Define  propriedades da tabela
    table.setAttribute('border','1');
    coluna1[input_cont].setAttribute('width', '18');
    coluna1[input_cont].setAttribute('align', 'center');
    coluna1[input_cont].setAttribute('bgcolor', '#F4FDF8');
    table.setAttribute('width', '995');
    coluna12[input_cont].colSpan = '15';
    linha[input_cont].setAttribute('id', 'linha_' + input_cont );

    //******************************** CRIA TEXT     
    new_txt = document.createTextNode(input_cont);// cria o conteúdo da célula  
    new_rec = document.createTextNode('Reconstituição');// cria o conteúdo da célula   
    
    //******************************** Cria BOTÃO para EXCLUIR
        btn_excluir = document.createElement("img");
        btn_excluir.setAttribute('name', 'btn_excluir');   
        btn_excluir.setAttribute('id', 'excluir_' + input_cont);   
        btn_excluir.setAttribute('onclick', 'java script:deletaCampo('+input_cont+')');
        btn_excluir.setAttribute('style', 'width:25px; height:20px; cursor:pointer'); 
        btn_excluir.setAttribute('src', 'lixeira_3.png')
        btn_excluir.setAttribute('title', 'Excluir Item')

    //********************************* Cria INPUT para ESQUEMA
            new_esquema = document.createElement('input');   
            new_esquema.setAttribute('type', 'text');   
            new_esquema.setAttribute('name', 'esquema_'+input_cont);   
            new_esquema.setAttribute('id', 'esquema_'+input_cont);   
            new_esquema.setAttribute('value', ''); 
            new_esquema.setAttribute('size', '5');  
        //add_item_div.appendChild(new_input);

//********************************* Cria SELECT para ÍTEM
    
    a_item = new Array( "Selecione..." , "Item 1" , "Item 2" , "Item 3");
  
      new_item = document.createElement( 'select' );
        new_item.setAttribute( 'name' , 'item_' + input_cont );
        new_item.setAttribute( 'id'   , 'item_' + input_cont );
                new_item.setAttribute( 'style'   , 'width:95');
        //add_item_div.appendChild( new_select );

     meuSelect = document.getElementById( 'item' + input_cont);
        
        for ( var i = 0; i <= 3; i++ )
    {
        newOption = document.createElement( 'option' );
        newOption.setAttribute( 'value' , a_item[i] );
        newOption.innerHTML = a_item[i];
        new_item.appendChild( newOption );
    }


//********************************* Cria SELECT para CÓDIGO
     a_codigo = new Array( "Selecione..." , "Código 1" , "Código 2" , "Código 3");

     new_codigo = document.createElement( 'select' );
        new_codigo.setAttribute( 'name' , 'codigo_' + input_cont );
        new_codigo.setAttribute( 'id'   , 'codigo_' + input_cont );
                new_codigo.setAttribute( 'style'   , 'width:95');
        //add_item_div.appendChild( new_select );

     meuSelect = document.getElementById( 'codigo' + input_cont );

    for ( var i = 0; i <= 3; i++ )
    {
        newOption = document.createElement( 'option' );
        newOption.setAttribute( 'value' , a_codigo[i] );
        newOption.innerHTML = a_codigo[i];
        new_codigo.appendChild( newOption );
    }
        

    //********************************* Cria INPUT para RECONSTITUICAO
  new_reconstituicao = document.createElement('input');   
  new_reconstituicao.setAttribute('type', 'text');   
  new_reconstituicao.setAttribute('name', 'reconstituicao_'+input_cont);   
  new_reconstituicao.setAttribute('id', 'reconstituicao_'+input_cont);   
  new_reconstituicao.setAttribute('value', ''); 
    new_reconstituicao.setAttribute('size', '145'); 




 tbody = document.createElement("tbody");
    //coluna1.innerHTML = input_cont;
    //campo2.innerHTML = "Campo da tabela ";

// Atribui as colunas dentro de cada linha e o seu conteúdo    
    linha[input_cont].appendChild(coluna1[input_cont]);
    coluna1[input_cont].appendChild(new_txt);
    coluna1[input_cont].appendChild(btn_excluir);
    
    linha[input_cont].appendChild(coluna2[input_cont]);
    coluna2[input_cont].appendChild(new_esquema);
    
    linha[input_cont].appendChild(coluna3[input_cont]);
    coluna3[input_cont].appendChild(new_item);
    
    linha2[input_cont].appendChild(coluna12[input_cont]);
    coluna12[input_cont].appendChild(new_rec);
    coluna12[input_cont].appendChild(new_reconstituicao);
    
// Associa a tabela ao corpo da página    
    tbody.appendChild(linha[input_cont]);
    tbody.appendChild(linha2[input_cont]);
    table.appendChild(tbody);
    add_item_div.appendChild(table);
    
    input_cont++;
}   
//**********************************************************************************************
//********************************* FIM DA FUNÇÃO PARA ADICIONAR ITENS ***********************
//**********************************************************************************************

function deletaCampo(id){

    alert(id)
    
    if (add_item_div.childNodes.length != 0){
        alert('Tem Nodes')
    }
    else
        alert('Não tem Nodes')
        
    tbody.removeChild(linha[id]);
    tbody.removeChild(linha2[id]);
    table.removeChild(tbody);
//    add_item_div.removeChild(table);
    
}

function countTags(n){
    var numtags = 0;
    if(n.nodeType ==1)
        numtags++;
    var children = n.childNodes;
    for( var i=0; 1< children.legth; i++){
        numtags += countTags(children[i]);
    }
    return numtags;


}

//alert(countTags(document))
</script>  

<link rel="stylesheet" href="estilo.css" type="text/css">
</head> 
<body onLoad="alert(countTags(document))">

<form method="post" name="frm" id="frm" action="">

<div id="add_item_div"></div>

<center><input type="button" value="Adicionar Ítem" name="add_input" id="add_input" onClick="addItem()"  class="btn_acoes"/></center>

</form>
</body>  
</html>

Editado Maio 15, 2009 por Thabata Sá

Romerito · Fevereiro 13, 2009

i aew Thabata Sá, saca só, não sei se entende muito bem o que tu quer mas testa isso:

abaixo da linha

table = document.createElement("table");

adiciona essa linha:

table.setAttribute( 'id' , 'tabela' + input_cont );

e na função deletaCampo(), tu deixa assim:

function deletaCampo(id){    
    if (add_item_div.childNodes.length != 0)
        alert('Tem Nodes')
    else
        alert('Não tem Nodes')

    var minhaTable = document.getElementById( "tabela" + id );
    add_item_div.removeChild( minhaTable );
    
}

espero que seja isso, abraço!

Thabata Sá · Fevereiro 13, 2009

Romerito, mais uma vez, muito obrigada!

Era exatamente isto, e eu fiquei o dia todo quebrando a cabeça aqui!

Valeu! =)

Abs,

Thabata

Thabata Sá · Maio 15, 2009

Boa tarde pessoal,

Bom, estou com um probleminha com código acima. É o seguinte, eu preciso inserir no BD os itens criados dinamicamente, para isso, concateno ao nome/id do elemento um índice e depois faço um FOR, que faz pega os values do form e faz X insert's(de acordo com a qtde de itens adicionados), o problema, é que eu não consigo recuperar os índices da linhas caso algum item seja excluído(a ordem muda). Por exemplo, se eu vou inserir os itens sem excluir (ordem 1, 2 e 3), ele funciona, pois é possível fazer com a sequência dor FOR, mas se algum item é excluído (a ordem fica, 1, 3, 4, por ex), já não tem como fazer o FOR. Pensei em duas soluções mas não consegui implementa-las. Primeira, fazer com que os itens se organizem de forma sequencial mesmo um item sendo excluído (sempre ficaria 1,2,3,4...) ou pegar os índices(1,3,4...) através de um array para recuperar os values dos campos e depois inseri-los como 1,2,3,4 no banco.

Se alguém puder ajudar...

Desde já, muito obrigada!

Romerito · Maio 15, 2009

oi Thabata Sá,

qual linguagem você usa e qual BD?

Thabata Sá · Maio 15, 2009

PHP e SQL ...

Ps. estou usando javascript para criação dinâmica...

Romerito · Maio 15, 2009

por que você não passa o campo em forma de array?

ex: ao invés de

new_reconstituicao.setAttribute('name', 'reconstituicao_'+input_cont);

passa assim:

new_reconstituicao.setAttribute('name', 'reconstituicao[]');

Entrar

Remover elementos, criados dinamicamente, através do id da

Pergunta

Thabata Sá

Link para o comentário

Compartilhar em outros sites

6 respostass a esta questão

Posts Recomendados

Romerito

Link para o comentário

Compartilhar em outros sites

Thabata Sá

Link para o comentário

Compartilhar em outros sites

Thabata Sá

Link para o comentário

Compartilhar em outros sites

Romerito

Link para o comentário

Compartilhar em outros sites

Thabata Sá

Link para o comentário

Compartilhar em outros sites

Romerito

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades