Problema al borrar elementos con DOM

hgp147 · #1 (**permalink**) 30/09/2008, 17:47

Hola, tengo un problema con el código de abajo, en Firefox funciona bien, pero no en IE. La función agregar va bien, pero no la de borrar, solo funciona con el primer elemento (el que ya esta en el div) pero luego no puede borrar ninguno más.
Cómo lo puedo solucionar?

Código HTML:

<html>
<head>
<script>

var cont = 2;

function agregarContrato() {

var input = document.createElement("input");
var img = document.createElement("img");
var br = document.createElement("br");

img.setAttribute("src", "no.png");
img.setAttribute("onclick", "borrar("+cont+")");
img.setAttribute("id",  cont+".a");
          
br.setAttribute("id", cont+".b");
          
input.setAttribute("type", "text");
input.setAttribute("name", "contrato[]");
input.setAttribute("id", cont);

document.getElementById("contratos").appendChild(input);
document.getElementById("contratos").appendChild(img);
document.getElementById("contratos").appendChild(br);

cont++;

}
      
      
function borrar(id){
      
var input =document.getElementById(id);
var img =document.getElementById(id+".a");
var br = document.getElementById(id+".b");

var padre = input.parentNode;

padre.removeChild(input);
padre.removeChild(img);
padre.removeChild(br);
}

</script>
</head>
<body>
<div id="contratos"><input type="text" id="1" /><img src="no.png" onclick="borrar(1);" id="1.a"><br id="1.b" />
</div>
<a href="#" onclick="javascript:agregarContrato();">Agregar</a>
</body>
</html>

Muchas gracias.

caricatos · #2 (**permalink**) 30/09/2008, 18:16

Hola:

Lo que tienes mal es un id numérico... deben empezar por una letra o guión bajo (no recuerdo si valen otras cosas).

Saludos

hgp147 · #3 (**permalink**) 30/09/2008, 20:31

Hola caricatos, lo cambie por este código pero sigue sin funcionar.

Código HTML:

<html>
<head>
<script>
var cont = 2;


function agregarContrato() {

var input = document.createElement("input");
var img = document.createElement("img");
var br = document.createElement("br");

img.setAttribute("src", "no.png");
img.setAttribute("onclick", "borrar("+cont+")");
img.setAttribute("id",  "img."+cont);
          
br.setAttribute("id", "br."+cont);
          
input.setAttribute("type", "text");
input.setAttribute("name", "contrato[]");
input.setAttribute("id", "input."+cont);

document.getElementById("contratos").appendChild(input);
document.getElementById("contratos").appendChild(img);
document.getElementById("contratos").appendChild(br);

cont++;


}


function borrar(id){
      
var input =document.getElementById("input."+id);
var img =document.getElementById("img."+id);
var br = document.getElementById("br."+id);

var padre = input.parentNode;

padre.removeChild(input);
padre.removeChild(img);
padre.removeChild(br);

}

</script>
</head>
<body>

<div id="contratos"><input type="text" id="input.1" /><img src="no.png" onclick="borrar(1);" id="img.1"><br id="br.1" />
</div>

<a href="#" onclick="javascript:agregarContrato();">Agregar</a>

</body>
</html>

Gracias

caricatos · #4 (**permalink**) 30/09/2008, 23:29

Hola:

Acabo de probarlo en ff y va bien, creo que a los id's tampoco se le pueden poner puntos... Cuando tengo problemas de este tipo suelo poner alertas para comprobar el funcionamiento...

Saludos

hgp147 · #5 (**permalink**) 01/10/2008, 11:08

Hola nuevamente caricatos, quite los puntos en los id, pero sigue sucediendo el mismo problema.

Puse un alert dentro de la función borrar, y solo se muestra cuando elimino el input de origen (el que ya estaba en el div), por lo que supongo que nunca se ejecuta la función para los demás. Qué puede ser?

IE Developer Toolbar

Gracias

hgp147 · #6 (**permalink**) 03/10/2008, 13:45

SOLUCIONADO.
Si a alguien le interesa en este post http://www.forosdelweb.com/f13/elimi...amente-416927/ encontre la solución.