Borrar filas dinamicamente (removeChild)

ffresno · #1 (**permalink**) 02/12/2008, 03:34

Buenas, os cuento mi duda.
Tengo un formulario, que inserto dinamicamente filas en una tabla con campos input y una imagen.

Creo los elementos de esa fila dinamicamente con createElment('tr'), ('td'), ('input') ('img') y asigno los atributos de name, id, size, maxlength, etc.
Al final, cada vez que pulso sobre 'insertar fila' me queda esto (siempre creado dinámicamente)

<tr>
<td> <input type="text"...></td>
<td> <input type="text"....></td>
<td> <a href="javascript:borraFila()"><img src ...></a></td>
</tr>

Como se ve, como última columna de cada fila, tengo una imagen con una llamada a una funcion que debe borrar esa fila, pero la duda que tengo es:

¿Cómo identifico al <TR> que quiero eliminar y los input que hay dentro?.

Muchas gracias, espero que puedan ayudarme.

P.D: Si alguien necesita alguna información más del código, que me diga. Gracias

ZiTAL · #2 (**permalink**) 02/12/2008, 03:48

Código HTML:

<html>
<head>
<script type="text/javascript" src="main.js">
</script>
</head>
<body>
<table>
<tr>
	<td>Bat</td>
	<td><input type="button" onclick="remove(this)" value="Eliminar" /></td>
</tr>
<tr>
	<td>Bi</td>
	<td><input type="button" onclick="remove(this)" value="Eliminar" /></td>
</tr>
<tr>
	<td>Hiru</td>
	<td><input type="button" onclick="remove(this)" value="Eliminar" /></td>
</tr>
</table>
</body>
</html>

main.js

Código javascript:

Ver originalfunction remove(t)
    {
        var td = t.parentNode;
        var tr = td.parentNode;
        var table = tr.parentNode;
        table.removeChild(tr);
    }

ffresno · #3 (**permalink**) 02/12/2008, 04:05

Me parece buena idea, o que va por buen camino, pero la funcion remove sólo la invoco cuando pulso sobre la imagen que está dentro de un <a href>.

El problema es que me da un error de javascript en la segunda linea de la funcion que me pasas.
He "depurado" un poco y me indica que la variable td no está definida. (undefined)

¿Tienes alguna idea?

Te pego el codigo por si puede servirte

Código:

<tr>
<td><input name="nombre_consejo[]" type="text" id="nombre_consejo" size="20" maxlength="20" value=""/> </td>
<td><input name="empresa_consejo][" type="text" id="empresa_consejo" size="20" maxlength="20" value=""/> </td>
<td><input name="cargo_consejo[]" type="text" id="cargo_consejo" size="12" maxlength="20" value=""/> </td>
<td><a href='javascript:delConsejoElement(this)'><img src='../../img/anular.png' border='0'></a></td>
</tr>

ZiTAL · #4 (**permalink**) 02/12/2008, 05:30

el problema lo tienes en el href, el href tiene que ser una direccion o un # si no quieres que vaya a ningun lado, y añadirle un onclick:

Código HTML:

<td><a href="#" onclick="delConsejoElement(this); return false;"><img src='../../img/anular.png' border='0'></a></td>

le damos un return false para que no vaya al href, de todas formas como los creas dinamicamente:

Código javascript:

Ver originala[i].href='#';
a[i].onclick=function(){delConsejoElement(this); return false;};

Ejemplo completo:

Código HTML:

<html>
<head>
<script type="text/javascript" src="main.js">
</script>
</head>
<body>
<table>
	<tr>
	<td><input name="nombre_consejo[]" type="text" id="nombre_consejo" size="20" maxlength="20" value=""/> </td>
	<td><input name="empresa_consejo][" type="text" id="empresa_consejo" size="20" maxlength="20" value=""/> </td>
	<td><input name="cargo_consejo[]" type="text" id="cargo_consejo" size="12" maxlength="20" value=""/> </td>
	<td><a href=""><img src="../../img/anular.png" border="0"></a></td>
	<tr>
	<td><input name="nombre_consejo[]" type="text" id="nombre_consejo" size="20" maxlength="20" value=""/> </td>
	<td><input name="empresa_consejo][" type="text" id="empresa_consejo" size="20" maxlength="20" value=""/> </td>
	<td><input name="cargo_consejo[]" type="text" id="cargo_consejo" size="12" maxlength="20" value=""/> </td>
	<td><a href=""><img src="../../img/anular.png" border="0"></a></td>
	</tr>
</table>
<script type="text/javascript">
addEvent();
</script>
</body>
</html>

main.js

Código javascript:

Ver originalfunction delConsejoElement(t)
    {
        var td = t.parentNode;
        var tr = td.parentNode;
        var table = tr.parentNode;      
        table.removeChild(tr);
    }
    function addEvent()
    {
        var a = document.getElementsByTagName('a');
        for(var i=0;i<a.length;i++)
        {
            a[i].href='#';
            a[i].onclick=function(){delConsejoElement(this); return false;};
        }       
    }

Edito: Los atributos siempre en minusculas y con comillas dobles.

ffresno · #5 (**permalink**) 02/12/2008, 06:01

Muchisimas gracias!!

El problema venía con el href y con el return false, que no sabía que era para que no hiciera la parte del href.

Por lo demás, perfecto. Muchas gracias otra vez.

SOLUCIONADO!!

jesuslanda · #6 (**permalink**) 09/11/2009, 07:45

Gracias este bug me ha servido mucho, tenia algo parecido q no podia resolver pones en el

<a href="#" onClick="javascript:tu_funcion(); return false;">Seleccionar </a>

y luego en :

function tu_funcion(){
....
....
....

if(a){

return true

}

else {

return false
}

}

y con eso evitas el envio

JavierB · #7 (**permalink**) 09/11/2009, 08:03

Hola jesuslanda

Te recuerdo el aviso que había al final de este tema y que parece que no has leído.

Tema cerrado.