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




las dinamicas (14)

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

Creo que intentará el código anterior, ya que funciona, pero no sé por qué funciona durante 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.

¿Cuál es el mejor método para eliminar una fila de la tabla con jQuery?


Es aceptable lo siguiente:

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

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

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();

* El código de arriba fue tomado de esta publicación de jQuery Howto .


Fácil .. prueba esto

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

Si la fila que desea eliminar puede cambiar, puede usar esto. Simplemente pase esta función a la fila # que desea eliminar.

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

Suponiendo que tenga 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 elemento primario del elemento principal del botón / enlace en el 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 al que se hace clic, así 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 modificarlo fácilmente para avisar al usuario o trabajar solo haciendo doble clic:

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

Espero que ayude ... luché en esto un poco yo mismo.


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

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

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


Tienes razón:

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

Esto funciona bien si su fila tiene una id , como por ejemplo:

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

Si no tiene una id , puede usar cualquiera de los numerosos selectores de jQuery.


Aprecio que este es un post antiguo, pero buscaba hacer lo mismo y descubrí que la respuesta aceptada no me funcionó. Suponiendo que JQuery se haya movido desde que esto fue escrito.

De todos modos, encontré lo siguiente trabajado 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 estaba envuelto en un detector de eventos.


Otro por empty() :

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

Si tienes 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 puede rellenar dinámicamente cuando construye 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 el ID de la etiqueta TR pero de todos modos puede eliminarlo.


prueba esto por tamaño

$(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


De una manera sencilla:

$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');




javascript jquery html-table