Quelle est la meilleure façon de supprimer une ligne de tableau avec jQuery?

Réponses:

434

Vous avez raison:

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

Cela fonctionne bien si votre ligne a un id, tel que:

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

Si vous n'en avez pas id, vous pouvez utiliser n'importe quelle pléthore de sélecteurs jQuery .

imjoevasquez
la source
Ouais, je supposais que la ligne avait un identifiant et vous avez l'identifiant :)
Darryl Hein
2
Faire de cette façon signifie que vous avez besoin d'un identifiant par ligne, ce qui ajoute potentiellement beaucoup de frais généraux. jQuery permet d'autres approches plus idiomatiques (à l'approche de jQuery), continuez à lire il y a plus de suggestions.
Ian Lewis
A fonctionné très bien pour moi car j'ai pu mettre un identifiant unique dans chaque rangée.
Jim Evans
2
Des trucs géniaux! JQuery est l'avenir!
heinkasner
1
"Jefe, qu'est-ce qu'une pléthore?"
Pete
110 
$('#myTable tr').click(function(){
    $(this).remove();
    return false;
});

Encore meilleur 

$("#MyTable").on("click", "#DeleteButton", function() {
   $(this).closest("tr").remove();
});
nickf
la source
4
Bizarre, votre solution est infiniment meilleure que celle acceptée.
Détente à Chypre
3
@jorg, juste pour le mentionner, vous avez une faute de frappe dans votre réponse, après le .click, vous devez remettre la fonction () rappeler
Franco
7
également $ (this) .closest ('tr'). remove ();
LeRoy
61

En supposant que vous avez un bouton / lien à l'intérieur d'une cellule de données dans votre tableau, quelque chose comme ça ferait l'affaire ...

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

Cela supprimera le parent du parent du bouton / lien cliqué. Vous devez utiliser parent () car il s'agit d'un objet jQuery, et non d'un objet DOM normal, et vous devez utiliser parent () deux fois, car le bouton réside dans une cellule de données, qui réside dans une ligne .... qui est ce que vous souhaitez supprimer. $ (this) est le bouton cliqué, donc simplement avoir quelque chose comme ça ne supprimera que le bouton:

$(this).remove();

Bien que cela supprime la cellule de données:

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

Si vous voulez simplement cliquer n'importe où sur la ligne pour la supprimer, quelque chose comme ça fonctionnerait. Vous pouvez facilement modifier cela pour inviter l'utilisateur ou travailler uniquement sur un double-clic:

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

J'espère que cela aide ... J'ai moi-même lutté un peu là-dessus.

salope
la source
25
Que faire si le lien n'est pas directement à l'intérieur du td, mais a, par exemple, une portée autour de lui? Je pense qu'il serait préférable de faire $ (this) .parents ('tr'). Remove (); pour le laisser remonter dans l'arbre DOM par lui-même, trouver le tr et le supprimer.
Paolo Bergantino
2
Cela fonctionnerait aussi. Tout dépend de l'endroit où se trouve votre bouton / lien dans le DOM, c'est pourquoi j'ai donné tant d'exemples et une explication aussi longue.
sluther
2
Vous pouvez également utiliser $ (this) .parents ('tr')
cgreeno
7
.live a été déconseillé dans jQuery 1.7 et supprimé dans 1.9. Voir jQuery.live
42

Vous pouvez utiliser:

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

pour trouver la ligne de table parent d'un élément.

Il est plus élégant que parent (). Parent (), c'est ce que j'ai commencé à faire et j'ai vite appris l'erreur de mes manières.

--Modifier - Quelqu'un a souligné que la question portait sur la suppression de la ligne ...

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

Comme indiqué ci-dessous, vous pouvez simplement faire:

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

Un extrait de code similaire peut être utilisé pour de nombreuses opérations telles que le déclenchement d'événements sur plusieurs éléments.

Ian Lewis
la source
4
Un peu plus succinct:$(this).closest("tr").remove()
Barry Kaye
15

Facile .. Essayez ceci

$("table td img.delete").click(function () {
    $(this).parent().parent().parent().fadeTo(400, 0, function () { 
        $(this).remove();
    });
    return false;
});
Thurein
la source
10
Je changerais $(this).parent().parent().parent()pour $(this).closest('tr'). Il est plus robuste et montre clairement ce que vous sélectionnez.
nickf
10

Est-ce que ce qui suit est acceptable:

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

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

Peut-être que quelque chose comme ça pourrait aussi fonctionner? Je n'ai pas essayé de faire quelque chose avec "ça", donc je ne sais pas si ça marche ou pas.

Eikern
la source
1
Eh bien, je dirais que ce serait un peu bizarre que la ligne disparaisse lorsque vous cliquez dessus. Pour le moment, j'ai un lien dans la ligne pour supprimer la ligne.
Darryl Hein
8

Tout ce que vous avez à faire est de supprimer la <tr>balise row row ( ) de votre table. Par exemple, voici le code pour supprimer la dernière ligne du tableau:

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

* Le code ci-dessus provient de ce post jQuery Howto .

Ouzbekjon
la source
7

essayez ceci pour la taille

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

liste complète:

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

le voir en action

Tim Abell
la source
4

Un autre par empty():

$(this).closest('tr').empty();
Pichet Thantipiputpinyo
la source
1
Cela ne supprime-t-il pas tous les <td> mais pas les <tr>? Je suppose que le navigateur peut supprimer le <tr> automatiquement, mais je pense que ce n'est pas garanti.
Darryl Hein
2

Si la ligne que vous souhaitez supprimer peut changer, vous pouvez l'utiliser. Passez simplement cette fonction à la ligne # que vous souhaitez supprimer.

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

Je pense que vous allez essayer le code ci-dessus, car il fonctionne, mais je ne sais pas pourquoi il fonctionne pendant un certain temps, puis la table entière est supprimée. j'essaie également de supprimer la ligne en cliquant sur la ligne. mais n'a pas pu trouver la réponse exacte.

Asim Sajjad
la source
Je ne sais pas si vous avez déjà essayé le $ ('tr'). Live ("click", function () {$ (this) .remove ();});
gfivehost
1

si vous avez du HTML comme celui-ci 

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

où userid="123" est un attribut personnalisé que vous pouvez remplir dynamiquement lorsque vous créez la table,

vous pouvez utiliser quelque chose comme 

  $(".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.');
            }
        }); 

     });

Donc, dans ce cas, vous ne connaissez pas la classe ou l'id de la TRbalise mais vous pouvez quand même le supprimer.

Développeur
la source
think live est désormais déconseillé au profit de on, $ (". spanUser"). on ('click', function () {
Tofuwarrior
1

J'apprécie que c'est un ancien poste, mais je cherchais à faire de même, et j'ai trouvé que la réponse acceptée ne fonctionnait pas pour moi. En supposant que JQuery a évolué depuis que cela a été écrit.

Quoi qu'il en soit, j'ai trouvé que ce qui suit fonctionnait pour moi:

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

Je ne sais pas si cela aide quelqu'un. Mon exemple ci-dessus faisait partie d'une fonction plus large, donc ne l'enveloppez pas dans un écouteur d'événements.

SparkyUK2104
la source
0

Si vous utilisez des tables d'amorçage

ajoutez cet extrait de code à votre 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);
};

Puis dans votre var allowedMethods = [

ajouter 'removeRow'

Enfin, vous pouvez utiliser $("#your-table").bootstrapTable('removeRow',{index:1});

Crédits à ce post

ricks
la source
0

id n'est pas un bon sélecteur maintenant. Vous pouvez définir certaines propriétés sur les lignes. Et vous pouvez les utiliser comme sélecteur.

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

et vous pouvez utiliser une fonction pour sélectionner la ligne comme celle-ci (ES6):

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

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

La méthode la plus simple pour supprimer des lignes du tableau:

  1. Supprimez la ligne du tableau à l'aide de son ID unique.
  2. Supprimer en fonction de l'ordre / index de cette ligne. Ex: supprimez la troisième ou la cinquième ligne.

Par exemple:

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