1. Inicio
  2. Pregunta y respuesta
  3. ¿Cuál es la mejor manera de eliminar una fila de la tabla con jQuery?

¿Cuál es la mejor manera de eliminar una fila de la tabla con jQuery?

2008-10-04 20 views

Respuesta

341

Tienes razón:

$('#myTableRow').remove();

Esto funciona bien si su fila tiene un id, tales como:

<tr id="myTableRow"><td>blah</td></tr>

Si no tiene un id, puede usar cualquiera de jQuery's .

Fuente

2008-10-04 21:11:49 imjoevasquez

+0

Sí, suponía que la fila tiene una identificación y usted tiene la ID :) –

+2

Hacerlo de esta manera significa que necesita una identificación por fila, lo que potencialmente agrega una gran sobrecarga. jQuery permite otros enfoques que son más idiomáticos (al enfoque de jQuery), continúa leyendo hay más sugerencias. –

+0

Funcionó muy bien para mí, ya que pude poner una identificación única en cada fila. –

6

¿Es aceptable el siguiente:

$('#myTableRow').remove();

Fuente

2008-10-04 21:04:56

+3

¡Sí, es aceptable! – kamalpreet

7 
function removeRow(row) { 
    $(row).remove(); 
} 

<tr onmousedown="removeRow(this)"><td>Foo</td></tr>

Tal vez algo así podría funcionar también? No he intentado hacer algo con "esto", así que no sé si funciona o no.

Fuente

2008-10-04 21:48:55 Eikern

+1

Bueno, yo diría que sería un poco extraño que la hilera desaparezca al hacer clic en ella. Por el momento tengo un enlace en la fila para eliminar la fila. –

82

@Eikern

Si vas a usar jQuery, usar jQuery hombre!

$('#myTable tr').click(function(){ 
    $(this).remove(); 
    return false; 
});

Fuente

2008-10-05 01:07:26 nickf

+0

bueno, muy no intrusivo – imjoevasquez

+3

Extraño, su solución es infinitamente mejor que la aceptada. – Puzbie

+3

@jorg, solo por mencionarlo, tiene un error tipográfico en su respuesta, después del clic debe hacer que la función() vuelva a llamar al – Franco

1 
$('tr').click(function() 
{ 
    $(this).remove(); 
});

Creo que va a probar el código anterior, ya que funciona, pero yo no sé por qué funciona por algún tiempo y luego se quita toda la tabla. También estoy tratando de eliminar la fila haciendo clic en la fila. pero no pudo encontrar la respuesta exacta.

Fuente

2008-10-11 14:41:35

+0

No estoy seguro si ya probaste el $ ('tr'). Live ("click", function() {$ (this) .remove();}); – gfivehost

49

Asumiendo que tiene un botón/enlace dentro de una celda de datos de la tabla, algo como esto haría el truco ...

$(".delete").live('click', function(event) { 
    $(this).parent().parent().remove(); 
});

Esto eliminará el padre del padre del botón/enlace que se hace clic. Necesita usar parent() porque es un objeto jQuery, no un objeto DOM normal, y necesita usar parent() dos veces, porque el botón vive dentro de una celda de datos, que vive dentro de una fila .... que es lo que quieres eliminar $ (Este) es el botón pulsado, por lo que simplemente tener algo como esto eliminará sólo el botón:

$(this).remove();

Aunque esto va a quitar la celda de datos:

$(this).parent().remove();

Si desea simplemente hacer clic en cualquier parte en la fila para eliminarlo algo así funcionaría. Desde aquí se puede modificar esto para indicar al usuario o trabajar sólo en un doble clic:

$(".delete").live('click', function(event) { 
    $(this).parent().remove(); 
});

Espero que ayude ... Luché en esto un poco a mí mismo.

Fuente

2009-03-29 04:58:14 sluther

+20

¿Qué pasa si el enlace no está directamente dentro del td, pero tiene, por ejemplo, un lapso alrededor del mismo? Creo que sería mejor hacer $ (esto) .parents ('tr'). Remove(); para dejar que camine solo por el árbol DOM, encuentre el tr y elimínelo. –

+2

Eso funcionaría también. Todo depende de en qué parte del DOM esté tu botón/enlace, por eso di tantos ejemplos y una explicación tan larga. – sluther

+2

También puede usar $ (this) .parents ('tr') – cgreeno

8

Todo lo que tiene que hacer es eliminar la etiqueta de la fila de la tabla (<tr>) de su tabla. Por ejemplo, aquí está el código para eliminar la última fila de la tabla:

$('#myTable tr:last').remove();

* Código de arriba fue tomada a partir this jQuery Howto post.

Fuente

2009-05-02 10:02:49 Uzbekjon

37

Se puede utilizar:

$($(this).closest("tr"))

para encontrar la tabla fila primaria de un elemento.

Es más elegante que parent(). Parent() que es lo que comencé haciendo y pronto aprendí el error de mis formas.

--Editar - Alguien señaló que la pregunta era sobre la eliminación de la fila ...

$($(this).closest("tr")).remove()

Como se señala a continuación sólo tiene que hacer:

$(this).closest('tr').remove();

Un código similar snippet se puede usar para muchas operaciones, como disparar eventos en múltiples elementos.

Fuente

2009-11-24 09:56:26

+3

Un poco más sucinto: '$ (this) .closest (" tr "). remove()' –

15

fácil .. probar este

$("table td img.delete").click(function() { 
    $(this).parent().parent().parent().fadeTo(400, 0, function() { 
     $(this).remove(); 
    }); 
    return false; 
});

Fuente

2010-01-11 05:20:01 Thurein

+10

Cambiaría '$ (this) .parent(). parent(). parent() 'to' $ (this) .closest ('tr') '. Es más robusto y muestra claramente lo que está seleccionando. – nickf

7

probar esto para el tamaño

$(this).parents('tr').first().remove();

lista completa:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     $('.deleteRowButton').click(DeleteRow); 
     }); 

    function DeleteRow() 
    { 
     $(this).parents('tr').first().remove(); 
    } 
    </script> 
</head> 
<body> 
    <table> 
    <tr><td>foo</td> 
    <td><a class="deleteRowButton">delete row</a></td></tr> 
    <tr><td>bar bar</td> 
    <td><a class="deleteRowButton">delete row</a></td></tr> 
    <tr><td>bazmati</td> 
    <td><a class="deleteRowButton">delete row</a></td></tr> 
    </table> 
</body> 
</html>

see it in action

Fuente

2010-10-30 22:21:21

2

Si la fila que desea borrar poder chan ge puedes usar esto Simplemente pase esta función a la fila # que desea eliminar.

function removeMyRow(docRowCount){ 
    $('table tr').eq(docRowCount).remove(); 
}

Fuente

2013-01-11 20:46:04 silvster27

1

si tiene HTML como este

<tr> 
<td><span class="spanUser" userid="123"></span></td> 
<td><span class="spanUser" userid="123"></span></td> 
</tr>

donde userid="123" es un atributo personalizado que se puede rellenar dinámicamente cuando se crea la tabla,

se puede usar algo como

$(".spanUser").live("click", function() { 

     var span = $(this); 
     var userid = $(this).attr('userid'); 

     var currentURL = window.location.protocol + '//' + window.location.host; 
     var url = currentURL + "/Account/DeleteUser/" + userid; 

     $.post(url, function (data) { 
      if (data) { 
        var tdTAG = span.parent(); // GET PARENT OF SPAN TAG 
        var trTAG = tdTAG.parent(); // GET PARENT OF TD TAG 
        trTAG.remove(); // DELETE TR TAG == DELETE AN ENTIRE TABLE ROW 
      } else { 
       alert('Sorry, there is some error.'); 
      } 
     }); 

    });

Entonces, en ese caso, no conoce la clase o la identificación de th e TR etiqueta pero de todos modos puede eliminarla.

Fuente

2013-05-06 12:44:45

+0

pensar en vivo ahora está en desuso a favor de on, $ (". SpanUser"). On ('click', function() { – Tofuwarrior

3

otro por empty():

$(this).closest('tr').empty();

Fuente

2015-05-20 23:57:32

+1

¿No elimina todos los pero no el ? Supongo que el el navegador puede eliminar el automáticamente, pero sospecho que eso no está garantizado. –

1

aprecio esto es una entrada antigua, pero yo estaba buscando para hacer lo mismo, y encontró la respuesta aceptada no funcionó para mí. Suponiendo que JQuery ha avanzado desde que esto fue escrito.

De todos modos, encontré la siguiente trabajó para mí:

$('#resultstbl tr[id=nameoftr]').remove();

No estoy seguro si esto ayuda a nadie. Mi ejemplo anterior era parte de una función más grande, por lo que no estaba envuelto en un detector de eventos.

Fuente

2016-08-19 12:55:30 SparkyUK2104

1

He utilizado este en mi código:

> $("#tbl").on("click", ".delete-row", function() { 
>     $(this).closest('tr').remove(); 
>    });

Fuente

2017-10-06 08:01:28

0

ID no es una buena selector de ahora. Puede definir algunas propiedades en las filas. Y puedes usarlos como selector.

<tr category="petshop" type="fish"><td>little fish</td></tr> 
<tr category="petshop" type="dog"><td>little dog</td></tr> 
<tr category="toys" type="lego"><td>lego starwars</td></tr>

y se puede utilizar una func para seleccionar la fila siguiente (ES6):

const rowRemover = (category,type)=>{ 
    $('tr[category=${category}][type=${type}]').remove(); 
} 

rowRemover('petshot','fish');

Fuente

2017-10-06 08:12:40

Cuestiones relacionadas

 Cuestiones relacionadas