Qual é a melhor maneira de remover uma linha da tabela com o jQuery?

Respostas:

434

Você está certo:

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

Isso funciona bem se sua linha tiver um id, como:

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

Se você não possui um id, pode usar qualquer um dos inúmeros seletores do jQuery .

imjoevasquez
fonte
Sim, eu estava assumindo que a linha tem um ID e você tem o ID :)
Darryl Hein
2
Fazer dessa maneira significa que você precisa de um ID por linha, o que potencialmente adiciona muita sobrecarga. O jQuery permite outras abordagens que são mais idiomáticas (para a abordagem do jQuery), continue lendo, há mais sugestões.
Ian Lewis
Funcionou muito bem para mim, pois eu era capaz de colocar um ID exclusivo em cada linha.
21714 Jim Jim Evans
2
Coisas impressionantes! JQuery é o futuro!
heinkasner
1
"Jefe, o que é uma infinidade?"
Pete
110 
$('#myTable tr').click(function(){
    $(this).remove();
    return false;
});

Ainda melhor 

$("#MyTable").on("click", "#DeleteButton", function() {
   $(this).closest("tr").remove();
});
nickf
fonte
4
Estranho, sua solução é infinitamente melhor que a aceita.
Relaxando em Chipre
3
@jorg, só para mencionar isso, você tem um erro de digitação na sua resposta, após a .click você deve colocar o function () chamada de volta
Franco
7
também $ (this) .closest ('tr'). remove ();
LeRoy #
61

Supondo que você tenha um botão / link dentro de uma célula de dados em sua tabela, algo como isso faria o truque ...

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

Isso removerá o pai do pai do botão / link clicado. Você precisa usar parent () porque é um objeto jQuery, não um objeto DOM normal, e precisa usar parent () duas vezes, porque o botão mora dentro de uma célula de dados, que mora dentro de uma linha .... o que você deseja remover. $ (this) é o botão clicado, portanto, simplesmente ter algo assim removerá apenas o botão:

$(this).remove();

Enquanto isso removerá a célula de dados:

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

Se você quiser simplesmente clicar em qualquer lugar da linha para removê-lo, algo assim funcionaria. Você pode modificar isso facilmente para solicitar ao usuário ou trabalhar apenas com um clique duplo:

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

Espero que ajude ... lutei um pouco com isso.

sluther
fonte
25
E se o link não estiver diretamente dentro do td, mas tiver, por exemplo, um espaço em torno dele? Eu acho que seria melhor fazer $ (this) .parents ('tr'). Remove (); para deixá-lo subir na árvore DOM sozinho, encontre o tr e remova-o.
Paolo Bergantino
2
Isso funcionaria também. Tudo depende de onde no DOM está o seu botão / link, e é por isso que dei tantos exemplos e uma explicação tão longa.
sluther
2
Você também pode usar $ (this) .parents ( 'tr')
cgreeno
7
.live foi descontinuado no jQuery 1.7 e removido no 1.9. Veja jQuery.live
42

Você pode usar:

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

para encontrar a linha da tabela pai de um elemento.

É mais elegante que parent (). Parent (), que foi o que comecei a fazer e logo aprendi o erro dos meus caminhos.

--Edit - Alguém apontou que a pergunta era sobre remover a linha ...

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

Como indicado abaixo, você pode simplesmente fazer:

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

Um trecho de código semelhante pode ser usado para muitas operações, como disparar eventos em vários elementos.

Ian Lewis
fonte
4
Um pouco mais sucinto:$(this).closest("tr").remove()
Barry Kaye
15

Fácil .. Tente isso

$("table td img.delete").click(function () {
    $(this).parent().parent().parent().fadeTo(400, 0, function () { 
        $(this).remove();
    });
    return false;
});
Thurein
fonte
10
Eu mudaria $(this).parent().parent().parent()para $(this).closest('tr'). É mais robusto e mostra claramente o que você está selecionando.
nickf
10

O seguinte é aceitável:

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

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

Talvez algo assim pudesse funcionar também? Eu não tentei fazer algo com "isso", então não sei se funciona ou não.

Eikern
fonte
1
Bem, eu diria que seria um pouco estranho a linha desaparecer quando você clicar nela. No momento, tenho um link na linha para excluir a linha.
Darryl Hein
8

Tudo o que você precisa fazer é remover a <tr>tag row ( ) da tabela. Por exemplo, aqui está o código para remover a última linha da tabela:

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

* O código acima foi retirado desta postagem do jQuery Howto .

Uzbekjon
fonte
7

tente isso por tamanho

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

vê-lo em ação

Tim Abell
fonte
4

Outro por empty():

$(this).closest('tr').empty();
Pichet Thantipiputpinyo
fonte
1
Isso não remove todos os <td> 's, mas não os <tr>? Acho que o navegador pode remover o <tr> automaticamente, mas suspeito que isso não é garantido.
Darryl Hein
2

Se a linha que você deseja excluir pode mudar, você pode usá-lo. Apenas passe essa função na linha # que deseja excluir.

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

Eu acho que você vai tentar o código acima, como ele funciona, mas eu não sei por que ele funciona por algum tempo e, em seguida, toda a tabela é removida. Também estou tentando remover a linha clicando na linha. mas não conseguiu encontrar a resposta exata.

Asim Sajjad
fonte
Não tenho certeza se você já tentou o $ ('tr'). Live ("clique", function () {$ (this) .remove ();});
Gfivehost 13/08
1

se você tem HTML assim 

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

onde userid="123"é um atributo personalizado que você pode preencher dinamicamente ao criar a tabela,

você pode 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.');
            }
        }); 

     });

Portanto, nesse caso, você não conhece a classe ou o ID da TRtag, mas pode excluí-la.

Desenvolvedor
fonte
acho que o live agora está obsoleto em favor de on, $ (". spanUser"). on ('click', function () {
Tofuwarrior
1

Aprecio que este é um post antigo, mas estava procurando fazer o mesmo e achei que a resposta aceita não funcionou para mim. Supondo que o JQuery seguiu em frente desde que isso foi gravado.

De qualquer forma, descobri o seguinte para mim:

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

Não tenho certeza se isso ajuda alguém. Meu exemplo acima fazia parte de uma função maior, portanto não a envolvia em um ouvinte de evento.

SparkyUK2104
fonte
0

Se você estiver usando Tabelas de Bootstrap

adicione esse snippet de código ao seu 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);
};

Então no seu var allowedMethods = [

adicionar 'removeRow'

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

Créditos para esta postagem

truques
fonte
0

id não é um bom seletor agora. Você pode definir algumas propriedades nas linhas. E você pode usá-los como seletor.

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

e você pode usar uma func para selecionar a linha assim (ES6):

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

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

O método mais fácil de remover linhas da tabela:

  1. Remova a linha da tabela usando seu ID exclusivo.
  2. Remova com base no pedido / índice dessa linha. Ex: remova a terceira ou quinta linha.

Por exemplo:

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