Esto no está funcionando. Sin embargo, Firebug no arroja ningún error.

Html:

<table>
       <tr><td>BookA</td><td><a href="javascript:deleteRow($(this));" class="red">Delete</a></td></tr>
       <tr><td>BookB</td><td><a href="javascript:deleteRow($(this));" class="red">Delete</a></td></tr>
        <tr><td>BookC</td><td><a href="javascript:deleteRow($(this));" class="red">Delete</a></td></tr>
        <tr><td>BookD</td><td><a href="javascript:deleteRow($(this));" class="red">Delete</a></td></tr>
</table>

Javascript:

function deleteRow(ref) {   
    $(ref).parent().parent().remove(); 
 }

Si es posible, me gustaría usar una solución con JavaScript en línea

2
Sergio del Amo 28 may. 2009 a las 21:07

6 respuestas

La mejor respuesta

En primer lugar, JavaScript en línea (href="javascript:x" o onclick="x") es generalmente malo. Con JavaScript en línea, no tendrá acceso al objeto de evento, y realmente no puede estar seguro de a qué hace referencia this.

JQuery (y casi todas las demás bibliotecas / framework de JavaScript) tiene un manejo de eventos incorporado. Entonces, su código se vería así con los controladores de eventos:

$('a.red').click(function(e) {
  e.preventDefault(); // don't follow the link
  $(this).closest('tr').remove(); // credits goes to MrKurt for use of closest()
});

Y aquí hay una demostración: http://jsbin.com/okaxu

10
moff 29 may. 2009 a las 15:21

Eliminar secuencias de comandos en línea

<script>
    $(function(){
        $('table td a').live('click', function(){
            $(this).parents('tr').remove();
            return false;
        });
    });
</script>
1
Dmitri Farkov 28 may. 2009 a las 17:18

Prueba esto:

// Bind all the td element a click event
$('table td.deleteRow').click(function(){
    $(this).parent().remove();
});

Por cierto, eliminará el javascript de su código html. Con este código html

<table>
    <tr>
        <td>BookA</td>
        <td class="red deleteRow">Delete</td>
    </tr>
    <tr>
        <td>BookB</td>
        <td class="red deleteRow">Delete</td>
    </tr>
    <tr>
        <td>BookC</td>
        <td class="red deleteRow">Delete</td>
    </tr>
    <tr>
        <td>BookD</td>
        <td class="red deleteRow">Delete</td>
    </tr>
</table>
3
Boris Guéry 28 may. 2009 a las 17:21

Tendría que estar de acuerdo en que se debe evitar JavaScript en línea, pero si hay alguna otra razón por la que es necesario o beneficioso usarlo, he aquí cómo.

<table>
   <tr><td>BookA</td><td><a href='#' onclick="$(this).parents('tr').remove(); return false;" class="red">Delete</a></td></tr>
   <tr><td>BookB</td><td><a href='#' onclick="$(this).parents('tr').remove(); return false;" class="red">Delete</a></td></tr>
   <tr><td>BookC</td><td><a href='#' onclick="$(this).parents('tr').remove(); return false;" class="red">Delete</a></td></tr>
   <tr><td>BookD</td><td><a href='#' onclick="$(this).parents('tr').remove(); return false;" class="red">Delete</a></td></tr>
</table> 
0
Michael DayMichael Day 28 may. 2009 a las 17:55

Esto no funcionará porque $ (esto) no se refiere a la etiqueta a como piensas (creo que se refiere al objeto de la ventana o algo así)

En lugar de usar JavaScript en línea en el atributo href, haga esto

En cambio haz esto

<script type="text/javascript">
 $("table a").click( function() {
  $(this).parent().parent().remove();
 });
</script>
1
Kenny Eliasson 28 may. 2009 a las 18:00

Creo que tiene un error en su función deleteRow. Así es como debe escribirse:

function deleteRow(ref) {   
    ref.parent().parent().remove(); 
}

La referencia que está pasando a deleteRow ya es un objeto jQuery. No debe usar $ (ref), solo ref solo ya que ref ya es un objeto jQuery.

0
Praveen Angyan 28 may. 2009 a las 17:13