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

Respuestas:

434

Tienes razón:

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

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

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

Si no tiene uno id, puede usar cualquiera de los muchos selectores de jQuery .

imjoevasquez
fuente
Sí, estaba asumiendo que la fila tiene una identificación y usted tiene la identificación :)
Darryl Hein
2
Hacerlo de esta manera significa que necesita una identificación por fila, lo que potencialmente agrega mucha sobrecarga. jQuery permite otros enfoques que son más idiomáticos (al enfoque de jQuery), continúe leyendo hay más sugerencias.
Ian Lewis
Me funcionó muy bien, ya que pude poner una identificación única en cada fila.
Jim Evans
2
¡Cosas geniales! JQuery es el futuro!
heinkasner
1
"Jefe, ¿qué es una plétora?"
Pete
110 
$('#myTable tr').click(function(){
    $(this).remove();
    return false;
});

Incluso uno mejor 

$("#MyTable").on("click", "#DeleteButton", function() {
   $(this).closest("tr").remove();
});
nickf
fuente
44
Extraño, su solución es infinitamente mejor que la aceptada.
Relajarse en Chipre
3
@jorg, solo por mencionarlo, tiene un error tipográfico en su respuesta, después del .click debe devolver la función () call
Franco
77
también $ (this) .closest ('tr'). remove ();
LeRoy
61

Suponiendo que tiene un botón / enlace dentro de una celda de datos en su 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 en el que se hace clic. Debe 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 en el que se hace clic, por lo que simplemente tener algo como esto eliminará solo el botón:

$(this).remove();

Si bien esto eliminará la celda de datos:

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

Si desea simplemente hacer clic en cualquier lugar de la fila para eliminarlo, algo como esto funcionaría. Puede modificar esto fácilmente para solicitar al usuario o trabajar solo con un doble clic:

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

Espero que ayude ... Luché un poco por esto.

zorra
fuente
25
¿Qué pasa si el enlace no está directamente dentro del td, pero tiene, por ejemplo, un lapso a su alrededor? Creo que sería mejor hacer $ (this) .parents ('tr'). Remove (); para dejar que camine por el árbol DOM por sí mismo, encuentre el tr y elimínelo.
Paolo Bergantino
2
Eso también funcionaría. Todo depende de en qué parte del DOM se encuentre su botón / enlace, por lo que di tantos ejemplos y una explicación tan larga.
sluther
2
También puede usar $ (this) .parents ('tr')
cgreeno
77
.live quedó en desuso en jQuery 1.7 y se eliminó en 1.9. Ver jQuery.live
42

Puedes usar:

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

para encontrar la fila de la tabla primaria de un elemento.

Es más elegante que parent (). Parent (), que es lo que comencé a hacer y pronto aprendí el error de mis costumbres.

--Editar - Alguien señaló que la pregunta era sobre eliminar la fila ...

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

Como se señala a continuación, simplemente puede hacer:

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

Se puede usar un fragmento de código similar para muchas operaciones, como disparar eventos en varios elementos.

Ian Lewis
fuente
44
Un poco más sucinto:$(this).closest("tr").remove()
Barry Kaye
15

Fácil .. Prueba esto

$("table td img.delete").click(function () {
    $(this).parent().parent().parent().fadeTo(400, 0, function () { 
        $(this).remove();
    });
    return false;
});
Thurein
fuente
10
Me gustaría cambiar $(this).parent().parent().parent()a $(this).closest('tr'). Es más robusto y muestra claramente lo que está seleccionando.
nickf
10

¿Es aceptable lo siguiente?

$('#myTableRow').remove();
Darryl Hein
fuente
8 
function removeRow(row) {
    $(row).remove();
}

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

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

Eikern
fuente
1
Bueno, diría que sería un poco extraño que la fila desapareciera al hacer clic en ella. Por el momento tengo un enlace en la fila para eliminar la fila.
Darryl Hein
8

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

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

* El código anterior se tomó de esta publicación de jQuery Howto .

Uzbekjon
fuente
7

prueba esto por talla

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

listado completo:

<!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>

verlo en acción

Tim Abell
fuente
4

Otro por empty():

$(this).closest('tr').empty();
Pichet Thantipiputpinyo
fuente
1
¿No elimina eso todos los <td> pero no los <tr>? Supongo que el navegador puede eliminar el <tr> automáticamente, pero sospecho que eso no está garantizado.
Darryl Hein
2

Si la fila que desea eliminar puede cambiar, puede usar esto. Simplemente pase esta función el número de fila que desea eliminar.

function removeMyRow(docRowCount){
   $('table tr').eq(docRowCount).remove();
}
silvster27
fuente
1 
$('tr').click(function()
 {
  $(this).remove();
 });

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

Asim Sajjad
fuente
No estoy seguro de si ya probaste $ ('tr'). Live ("click", function () {$ (this) .remove ();});
gfivehost
1

si tienes HTML como este 

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

dónde userid="123" es un atributo personalizado que puede rellenar dinámicamente cuando crea la tabla,

puedes 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 la TRetiqueta, pero de todos modos puede eliminarla.

Desarrollador
fuente
think live ahora está en desuso a favor de on, $ (". spanUser"). on ('click', function () {
Tofuwarrior
1

Aprecio que esta es una publicación antigua, pero estaba buscando hacer lo mismo, y encontré que la respuesta aceptada no funcionó para mí. Asumiendo que JQuery ha seguido adelante desde que esto fue escrito.

De todos modos, encontré que lo siguiente funcionó para mí:

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

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

SparkyUK2104
fuente
0

Si está utilizando tablas de Bootstrap

agregue este fragmento de código a su bootstrap_table.js

BootstrapTable.prototype.removeRow = function (params) {
    if (!params.hasOwnProperty('index')) {
        return;
    }

    var len = this.options.data.length;

    if ((params.index > len) || (params.index < 0)){
        return;
    }

    this.options.data.splice(params.index, 1);

    if (len === this.options.data.length) {
        return;
    }

    this.initSearch();
    this.initPagination();
    this.initBody(true);
};

Entonces en tu var allowedMethods = [

añadir 'removeRow'

Finalmente puedes usar $("#your-table").bootstrapTable('removeRow',{index:1});

Créditos a esta publicación

ricks
fuente
0

id no es un buen selector 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 puede usar una función para seleccionar la fila como esta (ES6):

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

rowRemover('petshop','fish');
Kamuran Sönecek
fuente
0

El método más fácil para eliminar filas de la tabla:

  1. Elimine la fila de la tabla con su ID única.
  2. Eliminar según el orden / índice de esa fila. Ej: eliminar la tercera o quinta fila.

Por ejemplo:

 <table id='myTable' border='1'>
    <tr id='tr1'><td>Row1</td></tr>
    <tr id='tr2'><td>Row2</td></tr>
    <tr id='tr3'><td>Row3</td></tr>
    <tr id='tr4'><td>Row4</td></tr>
    <tr id='tr5'><td>Row5</td></tr>
  </table>

//======REMOVE TABLE ROW=========
//1. remove spesific row using its ID
$('#tr1').remove();

//2. remove spesific row using its order or index.
//row index started from 0-n. Row1 index is 0, Row2 index is 1 and so on.
$('#myTable').find('tr:eq(2)').remove();//removing Row3
Ayu Anggraeni
fuente