Qual è il modo migliore per rimuovere una riga di tabella con jQuery?

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

  •  05-07-2019
  •  | 
  •  

Domanda

Qual è il metodo migliore per rimuovere una riga di tabella con jQuery?

È stato utile?

Soluzione

Hai ragione: 

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

Funziona bene se la tua riga ha un id, come ad esempio: 

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

Se non possiedi un <=>, puoi utilizzare qualsiasi pletora di selettori .

Altri suggerimenti

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

Supponendo che tu abbia un pulsante / collegamento all'interno di una cella di dati nella tua tabella, qualcosa del genere farebbe il trucco ... 

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

Questo rimuoverà il genitore del genitore del pulsante / collegamento su cui si fa clic. Devi usare parent () perché è un oggetto jQuery, non un normale oggetto DOM, e devi usare parent () due volte, perché il pulsante vive all'interno di una cella di dati, che vive all'interno di una riga .... cosa vuoi rimuovere. $ (questo) è il pulsante cliccato, quindi semplicemente avere qualcosa di simile rimuoverà solo il pulsante: 

$(this).remove();

Mentre questo rimuoverà la cella di dati: 

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

Se vuoi semplicemente fare clic in un punto qualsiasi della riga per rimuoverlo, qualcosa del genere funzionerebbe. Puoi facilmente modificarlo per richiedere all'utente o lavorare solo con un doppio clic: 

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

Spero che aiuti ... Ho faticato un po 'su questo me stesso

Puoi usare: 

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

per trovare la riga della tabella padre di un elemento.

È più elegante di parent (). parent () che è quello che ho iniziato a fare e presto ho imparato l'errore dei miei modi.

--Modifica - Qualcuno ha sottolineato che la domanda riguardava la rimozione della riga ... 

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

Come indicato di seguito puoi semplicemente fare: 

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

Uno snippet di codice simile può essere utilizzato per molte operazioni come l'attivazione di eventi su più elementi.

Facile .. Prova questo 

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

È accettabile la seguente: 

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

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

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

Forse potrebbe funzionare anche qualcosa del genere? Non ho provato a fare qualcosa con & Quot; questo & Quot ;, quindi non so se funziona o meno.

Tutto quello che devi fare è rimuovere il tag della riga della tabella (<tr>) dalla tabella. Ad esempio, ecco il codice per rimuovere l'ultima riga dalla tabella:

  

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

* Il codice sopra è stato preso da questo jQuery Howto pubblica .

prova questo per dimensione 

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

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

vederlo in azione

Un altro di empty(): 

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

Se la riga che desideri eliminare potrebbe cambiare, puoi usarla. Basta passare questa funzione alla riga # che si desidera eliminare. 

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

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

Penso che proverai il codice sopra, come funziona, ma non so perché funzioni per qualche tempo e quindi l'intera tabella viene rimossa. sto anche cercando di rimuovere la riga facendo clic sulla riga. ma non sono riuscito a trovare la risposta esatta.

se hai HTML come questo 

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

dove userid="123" è un attributo personalizzato che è possibile popolare in modo dinamico quando si crea la tabella,

puoi usare qualcosa come 

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

     });

Quindi in quel caso non conosci la classe o l'id del tag TR ma comunque sei in grado di eliminarlo.

Apprezzo che questo sia un vecchio post, ma stavo cercando di fare lo stesso e ho scoperto che la risposta accettata non funzionava per me. Supponendo che JQuery sia passato da quando è stato scritto.

Ad ogni modo, ho scoperto che per me ha funzionato: 

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

Non sono sicuro che questo aiuti qualcuno. Il mio esempio sopra faceva parte di una funzione più ampia, quindi non lo ha racchiuso in un listener di eventi.

Se si utilizzano tabelle Bootstrap

aggiungi questo snippet di codice al tuo 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);
};

Quindi nel tuo var allowedMethods = [

aggiungi 'removeRow'

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

Crediti per questo post

id non è un buon selettore ora. È possibile definire alcune proprietà sulle righe. E puoi usarli come selettore. 

<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 puoi usare una funzione per selezionare la riga in questo modo (ES6): 

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

rowRemover('petshop','fish');
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top