Quel est le meilleur moyen de supprimer une ligne de tableau avec jQuery?

StackOverflow https://stackoverflow.com/questions/170997

  •  05-07-2019
  •  | 
  •  

Question

Quelle est la meilleure méthode pour supprimer une ligne d'un tableau avec jQuery?

Était-ce utile?

La solution

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'avez pas de <=>, vous pouvez utiliser l'un des sélections . .

Autres conseils

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

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

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

Ceci supprimera le parent du parent du bouton / lien sur lequel vous avez 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 se trouve dans une ligne .... qui est ce que vous voulez enlever. $ (this) est le bouton sur lequel vous avez cliqué. Il vous suffira donc simplement d'avoir quelque chose comme ceci pour ne supprimer que le bouton: 

$(this).remove();

Ceci supprimera la cellule de données: 

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

Si vous souhaitez simplement cliquer n'importe où sur la ligne pour la supprimer, un résultat comme celui-ci fonctionnerait. Vous pouvez facilement modifier cela pour inviter l'utilisateur ou ne travailler que sur un double-clic: 

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

J'espère que ça aide ... J'ai un peu lutté moi-même.

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 fait au début et que j’ai vite compris l’erreur de mes manières.

- Modifier - Quelqu'un a fait remarquer que la question concernait 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.

Facile .. Essayez ceci 

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

Est-ce que ce qui suit est acceptable: 

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

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

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

Peut-être que quelque chose comme ceci pourrait fonctionner aussi bien? Je n'ai pas essayé de faire quelque chose avec & "This &", Donc je ne sais pas si cela fonctionne ou non.

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

  

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

* Le code ci-dessus provient de Cet article jQuery Howto publie .

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

Autre par empty(): 

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

Si la ligne que vous souhaitez supprimer peut changer, vous pouvez l'utiliser. Il suffit de passer à cette fonction la ligne # que vous souhaitez supprimer. 

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

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

Je pense que vous allez essayer le code ci-dessus, car cela fonctionne, mais je ne sais pas pourquoi cela fonctionne pendant un certain temps et ensuite tout le tableau est supprimé. J'essaie également de supprimer la ligne en cliquant dessus. mais n'a pas pu trouver la réponse exacte.

si vous avez un 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 renseigner de manière dynamique lors de la construction du tableau,

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 ni l'identifiant de la balise TR mais vous pouvez quand même le supprimer.

J'apprécie qu'il s'agisse d'un ancien message, 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 ait évolué depuis sa rédaction.

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

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

Je ne suis pas sûr que cela aide quelqu'un. Mon exemple ci-dessus faisait partie d'une fonction plus importante, aussi ne l'utilisez pas dans un écouteur d'événements.

Si vous utilisez des tables d'amorçage

ajoutez cet extrait de code à votre fichier 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 pour cet article

id n'est pas un bon sélecteur maintenant. Vous pouvez définir des 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 ceci (ES6): 

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

rowRemover('petshop','fish');
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top