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

obtener datos de una tabla html javascript

Question

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

Answer 1

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.

Answer 2

Es aceptable lo siguiente:

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

Answer 3

Fácil .. prueba esto

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

Answer 4

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(''petshot'',''fish'');

Answer 5

Otro por empty() :

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

Answer 6

Puedes usar:

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

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

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

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

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

Como se indica 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 múltiples elementos.

Answer 7

Si está utilizando las tablas de Bootstrap

agrega este fragmento de código a tu 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);
};

Luego en tu var allowedMethods = [

añadir ''removeRow''

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

Créditos a esta publicación.

Answer 8

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

Answer 9

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.

Answer 10

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.

Answer 11

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.

Answer 12

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 .

Answer 13

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

Answer 14

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

Answer 15

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

Answer 16

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.