(Resolvido) Como excluir uma div e imput via javascript

[moisesf]

Crio dinamicamente dentro de uma div chamada forms, checkbox, input text e textarea.

cada checkbox é associado uma id.

ao desmarcar essa checkbox, ela o input text , a textarea e uma div com o mesmo id posicionada na página devem ser exvluidas.

como fazer isso via document.getElementById?

/*CÓDIGO FONTE*/

<script type="text/javascript" charset="iso-8859-1">
function pega_coordenada(){

var   posy=event.offsetY;
var  posx=event.offsetX;
var ids= posy + posx;

var novaDIV_click = "<div id='"+ posy + posx +"' style='background:url(ponto.png); position:absolute; width:4px;height:6px;top:"+ posy +"px;left:" + posx +"px'></div>";

var novaDIV ="<input onClick='clear(" + ids + ")' type='checkbox'checked='checked' value='" + ids + "' id='" + ids + "' name='" + ids + "' /><label>Link</label><input type='text' name='link' id='link' /><br /><label>Descrição / Local</label><textarea id='" + ids + "' name='" + ids + "' ></textarea>";



document.getElementById('mouse').innerHTML += novaDIV_click;
document.getElementById('forms').innerHTML += novaDIV;


/*alert(posy + "e" + posx);*/
}



</script>


<script>

function clear(coordenadas) {

AQUI ENTRARIA A FUNÇÃO

/*ISSO NÃO FUNCIONA */
/*if(document.getElementById('coordenadas').value!="") {
document.getElementById('coordenadas').value="";*/

}
}
</script>

[Matheus Matos]

Excluir não tem como, tem como ocultar. Tanto faz as duas opções:

document.getElementById("id-do-elemento").style.display="none";
document.getElementById("id-do-elemento").style.visibility="hidden";

Vlw

Matheus Matos

[moisesf]

MATEUS, não posso esconder a div, preciso de excluir, pois no futuro as divs que ficarem serão enviadas por form com seu conteúdo.

var   posy=event.offsetY;
var  posx=event.offsetX;
var ids= posy + posx;
/*alert(ids);*/
var novaDIV_click = "<div id='"+ ids +"' style='background:url(ponto.png); position:absolute; width:4px;height:6px;top:"+ posy +"px;left:" + posx +"px'></div>";

var novaDIV ="<div id='" + ids + "'><input  type='button'  onClick='limpa("+ids+")'    value='Excluir'  name='limpa_dados' /><label>Link</label><input type='text' name='link'  /><br /><label>Descrição / Local</label><textarea  name='local' ></textarea></div>";
alert(novaDIV);

document.getElementById('mouse').innerHTML += novaDIV_click;
document.getElementById('receptor').innerHTML += novaDIV;


/*alert(posy + "e" + posx);*/
}

Estou usando assim:

function limpa(codigo) {
var cod=codigo;
alert(cod);

var filho =document.getElementById(cod);
document.getElementById('mouse').removeChild(filho); /* Este está funcionando*/
document.getElementById('receptor').removeChild(filho); /*Este não funciona*/
}

Se substituir o ids da var novaDiv por um número rel por exemplo 1, a div é excluída, mas na forma dinâmica não está sendo excluída

Poderiam me ajudar?

Editado Janeiro 3, 2010 por KaKarotto
Adicionadas tags de código para facilitara visualização. KaKarotto.

[Matheus Matos]

Posso te ajudar.. mas não sou tão bom em Javascript.. mas vamos lá.

Você falou que está funcionando, ela realmente exclui?

Entendi assim: Você tem duas divs.

Dentro delas tem checkbox, inputtext e textarea.

Caso desmarque uma checkbox, um imputtext e uma textarea deveria ser excluida correto?

Para depois, no form, só pegar o conteudo que estiver dentro do form isso?

Explica se é assim, porque não tem como excluir, mas, pode-se resolver de outra maneira, dê mais detalhes e se tiver no ar, o link pra gente ver. ;)

Vlw

Matheus Matos

[KaKarotto]

Moises, tente utilizar as tags de código por favor, se possível também indente o código pra facilitar a visualização.

Não sei o que é esse elemento de id 'mouse' e 'receptor'. O código ta incompleto, não dá pra ajudar muito.

Você cria duas divs, uma chamada "novaDIV_clic" e a outra "novaDIV". As duas, pelo seu código, terão o mesmo id.

Só pode existir um ID único num html. O javascript não consegue distinguir qual pegar se definir mais de um e consequentemente, não consegue remover os nodos da forma que está tentando fazer.

E sim, tem como excluir os elementos html.

[moisesf]

Não está no ar, estou rodando no meu pc ainda.

Ao clicar em um mapa, ele cria uma div position absolute

Também cria uma div com um botão excluir, input text, e uma textarea

Esse botão excluir, retira a div do mapa, está ok. Também retira a div co o input text e text area, esse não está funcionando com o id entrando automaticamente.

Se eu retiro o ids e coloco manualmente um número, funciona que é uma beleza.

Mas se o ids entra automaticamente, não funciona.

Dei um alert com o ids para ver como estava entrando e o ids aparece normal.

VEJA ONDE MARQUEI ABAIXO

<script type="text/javascript" charset="iso-8859-1">
function pega_coordenada(){

var   posy=event.offsetY;
var  posx=event.offsetX;
var ids= posy + posx;
/*alert(ids);*/

[color=#FF0000][b]/* CRIA UM PONTO NO MAPA - ESTE PONTO É EXCLUIDO QUANDO CLICADO NO BOTÃO EXCLUIR - ESTÁ FUNCIONANDO*/[/b][/color]
var novaDIV_click = "<div id='"+ ids +"' style='background:url(ponto.png); position:absolute; width:4px;height:6px;top:"+ posy +"px;left:" + posx +"px'></div>";

[color=#FF0000]/*CRIA UMA DIV ABAIXO DO MAPA - ESSE É O BOTÃO PRESSIONADO QUE FUNCIONA APENAS NA DIV DO MAPA NESTA DIV NÃO FUCIONA*/[/color]
[color=#FF0000]/*SE SUBSTITUIR A "IDS" POR QUALQUER NÚMERO ELA FUNCIONA*/[/color]
var novaDIV ="<div id='"+ ids +"'><input  type='button'  onClick='limpa("+ ids +")'    value='Excluir'  name='limpa_dados' /><label>Link</label><input type='text' name='link'  /><br /><label>Descrição / Local</label><textarea  name='local' ></textarea></div>";
alert(novaDIV_click);
alert(novaDIV);

document.getElementById('mouse').innerHTML += novaDIV_click;
document.getElementById('receptor').innerHTML += novaDIV;


/*alert(posy + "e" + posx);*/
}






function limpa(codigo) {
var cod=codigo;
alert(cod);

var filho =document.getElementById(cod);
alert(filho);
var pai1 = document.getElementById("mouse");
var pai2 = document.getElementById("receptor");[color=#FF0000]/*SÓ ESTÁ FUNCIONANDO SE INSERIR A IDS MANUALMENTE*/[/color]

pai1.removeChild(filho);
pai2.removeChild(filho);

}



function copyCode(){
    cop = document.getElementById("dados").createTextRange();
    cop.execCommand("RemoveFormat");
    cop.execCommand("Copy");
    /*alert("Código copiado para a área de transferência.");*/
}
</script>

Mesmo apontando que as divs estão em containers diferentes?

ex: a div que entra no mapa esta dentro da div mouse com nome de 123

e a div que está no form dentro do receptor tem o nome 123.

Como o botão leva o cod 123 para ser excluído ele ão exclui porque tenho dis divs id 123?

[KaKarotto]

Moisés, acho que você não leu 1 só linha do meu post...

1º você não usou tags de código como eu pedi.

2º você ainda está usando dois elementos com o mesmo id, e eu já falei que isso não se deve fazer.

Um exercício de interpretador para você.

box 1 : id ="box"

box 2 : id = "box"

document.body.removeChild( document.getElementById('box') )

Qual dos boxes acima, o comando de remover vai ser aplicado ?

ids é uma variável que contém uma string que vai ser o id dos dois div´s que você cria.

Essa variável está sendo usada para dar id´s à duas divs.

De novo, NÃO PODE EXISTIR 2 ELEMENTOS COM O MESMO NOME NO ATRIBUTO ID!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[moisesf]

DEU CERTO, O ERRO ERA QUE AS DIVS ESTAVAM SENDO CRIADAS COM O MESMO ID.

AGORA ESTÁ FUNCIONANDO PERFEITAMENTE.

MUITO OBRIGADO.

<script type="text/javascript" charset="iso-8859-1">
function pega_coordenada(){

var   posy=event.offsetY;
var  posx=event.offsetX;
var ids= posy + posx;
var ids2= ids + "a";
alert(ids2);
var novaDIV_click = "<div id='"+ ids +"' style='background:url(ponto.png); position:absolute; width:4px;height:6px;top:"+ posy +"px;left:" + posx +"px'></div>";


var novaDIV ="<div id='"+ ids2 +"'><input  type='button'  onClick='limpa("+ ids +")'    value='Excluir'  name='limpa_dados' /><label>Link</label><input type='text' name='link'  /><br /><label>Descrição / Local</label><textarea  name='local' ></textarea></div>";
alert(novaDIV_click);
alert(novaDIV);

document.getElementById('mouse').innerHTML += novaDIV_click;
document.getElementById('receptor').innerHTML += novaDIV;


/*alert(posy + "e" + posx);*/
}






function limpa(codigo) {
var cod=codigo;
var cod2=cod+"a";
alert(cod);

var filho1 =document.getElementById(cod);
var filho2 =document.getElementById(cod2);
var pai1 = document.getElementById("mouse");
var pai2 = document.getElementById("receptor");

pai1.removeChild(filho1);
pai2.removeChild(filho2);

}

[Matheus Matos]

Não sabia que podia excluir elementos html. Desculpe Móises.

Como o KaKarotto falou você não pode definir o mesmo nome de ID para dois elementos HTML.

acabou que não falei nada

Editado Janeiro 3, 2010 por Matheus Matos

[moisesf]

Obrigado a todos.

Assim que mudei o nome das divs dinamicamente, deu certo.

[KaKarotto]

DEU CERTO, O ERRO ERA QUE AS DIVS ESTAVAM SENDO CRIADAS COM O MESMO ID.

AGORA ESTÁ FUNCIONANDO PERFEITAMENTE.

MUITO OBRIGADO.

AEEEEEEEee pequeno Jedi.

Só precisa ler os posts com atenção que a coisa vai que vai.

Boa sorte aí na sua empreitada.

Não sabia que podia excluir elementos html. Desculpe Móises.

Como o KaKarotto falou você não pode definir o mesmo nome de ID para dois elementos HTML.

Matheus, você acabou que não falando nada... -_-

Tópico resolvido ;)