[SOLUCIONADO] Eliminar elemento padre al pulsar checkbox

alyciashape · #1 (**permalink**) 31/01/2013, 10:59

Tengo estos checkbox dentro de un tr:

Código HTML:

Ver original<input type='checkbox' name='5664' id='clacli' class='eliminar' />

Lo que quería es que se eliminara todo el TR al marcar el checkbox.

Vi esta función con jQuery aquí mismo pero no logro que funcione:

Código Javascript:

Ver original<script type="text/javascript">
        $(document).ready(function() {
            $(".eliminar").click(function () {
                $('.check:checked').parent().remove(); 
            });
        });
    </script>

Nótese que se muy poco de JS.

Gracias

Creo que lo he arreglado pero me ha quedado bastante feo.

Como el elemento está dentro de un label, dentro de un td y tal tuve que poner así:

Código Javascript:

Ver original$('.eliminar:checked').parent().parent().parent().remove();

¿Puedo decirle que elimine el tr inmediatamente superior y evitar todos los parent anidados?
Y si hay forma de eliminarlos nada mas pulsar en el checkbox en lugar de tener que pulsar un boton mejor.

David · #2 (**permalink**) 31/01/2013, 11:42

Usa closest():

Código Javascript:

Ver original$(document).ready(function() {
            $(".eliminar").click(function () {
                if (this.checked) {
                    $(this).closest("tr").remove();
                }
            });
        });

emprear · #3 (**permalink**) 31/01/2013, 11:54

otra forma

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".eliminar").click(function () {
    var indice = $(".eliminar").index(this);
    $($('#mitabla tr')[indice]).remove();
    });
});
</script>
</head>
<body>
<table border="1" id="mitabla">
<tr><td>fila 1 <input type='checkbox' name='5664' id='clacli' class='eliminar' /></td></tr>
<tr><td>fila 2 <input type='checkbox' name='5663' id='clacli2' class='eliminar' /></td></tr>
<tr><td>fila3</td></tr>
</table>
</body>
</html>

Ponemos un id a la tabla por si hubiera otras

SAludos

alyciashape · #4 (**permalink**) 01/02/2013, 02:12

Muchas gracias a los dos.