Was ist der beste Weg, um eine Tabellenzeile mit jQuery entfernen?

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

  •  05-07-2019
  •  | 
  •  

Frage

Was ist die beste Methode für eine Tabellenzeile mit jQuery zu entfernen?

War es hilfreich?

Lösung

Sie haben Recht: 

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

Dies funktioniert gut, wenn Ihre Zeile eine id hat, wie zum Beispiel: 

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

Wenn Sie keine id haben, können Sie eine von jQuery verwenden Vielzahl von Selektoren .

Andere Tipps

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

Angenommen, Du innerhalb einer Datenzelle in der Tabelle einen Button / Link hast, so etwas wie dies würde den Trick ... 

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

Das wird die Eltern der Eltern des Button / Link entfernen, die angeklickt wird. Sie müssen Eltern () verwenden, weil es ein jQuery-Objekt ist, kein normales DOM-Objekt, und Sie müssen Eltern verwenden () zweimal, weil die Taste innerhalb einer Datenzelle lebt, die in einer Reihe lebt .... das ist was Sie wollen, zu entfernen. $ (This) ist die Schaltfläche geklickt, so einfach so etwas wie diese, die nur auf den Button entfernen wird: 

$(this).remove();

Während dies die Datenzelle entfernen: 

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

Wenn Sie wollen einfach irgendwo auf der Zeile klicken, um es zu entfernen so etwas wie dies funktionieren würde. Sie könnten dies leicht ändern, den Benutzer aufzufordern oder nur auf einem Doppelklick arbeiten: 

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

Ich hoffe, das hilft ... Ich kämpfte auf das ein bisschen selbst.

Sie können mit: 

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

für die übergeordnete Tabelle Zeile eines Elements zu finden.

Es ist eleganter als parent (). Parent () das ist, was ich begann gelernt zu tun und bald die Fehler meiner Wege.

- Bearbeiten - Jemand wies darauf hin, dass die Frage war, um die Zeile zu entfernen ... 

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

Wie weiter unten Sie wies darauf hin, können Sie einfach tun: 

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

Ein ähnlicher Codeausschnitt können Sie für viele Operationen wie Feuerungsereignisse auf mehreren Elementen verwendet werden.

Einfache .. Try this 

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

Ist das folgende akzeptabel: 

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

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

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

Vielleicht wie etwas das könnte auch funktionieren? Ich habe nicht mit „das“ etwas zu tun versucht, so weiß ich nicht, ob es funktioniert oder nicht.

Alles, was Sie tun müssen, ist die Tabellenzeile (<tr>) Tag aus Ihrer Tabelle zu entfernen. Zum Beispiel hier ist der Code die letzte Zeile aus der Tabelle zu entfernen:

  

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

* Code oben wurde von diese jQuery Howto Post anzeigen .

versuchen, dies für die Größe 

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

vollständige Liste: 

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

es in Aktion sehen

Ein weiterer von empty(): 

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

Wenn die Zeile, die Sie löschen möchten, können Sie diese verwenden, ändern können. Übergeben Sie einfach diese Funktion die Zeile # Sie löschen möchten. 

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

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

Ich glaube, Sie werden den obigen Code versuchen, wie es funktioniert, aber ich weiß nicht, warum es für einige Zeit arbeiten und dann wird die gesamte Tabelle entfernt. Ich versuche auch die Zeile zu entfernen, indem Sie die Zeile klicken. konnte aber nicht genaue Antwort finden.

, wenn Sie HTML wie folgt 

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

wo userid="123" ist ein benutzerdefiniertes Attribut, das Sie dynamisch bevölkern können, wenn Sie bauen die Tabelle,

Sie können so etwas wie

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

     });

Also in diesem Fall, dass Sie nicht wissen, die Klasse oder die ID des TR Tages aber trotzdem sind Sie in der Lage, es zu löschen.

Ich schätze dies eine alte Post, aber ich war auf der Suche, das gleiche zu tun, und die akzeptierte Antwort gefunden habe nicht für mich arbeiten. Unter der Annahme, JQuery hat sich weiterentwickelt, da dies geschrieben wurde.

Wie auch immer, ich fand die für mich gearbeitet folgenden: 

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

Nicht sicher, ob dies jemand hilft. Mein Beispiel oben war Teil einer größeren Funktion so nicht in einem Ereignis-Listener gewickelt.

Wenn Sie Bootstrap Tabellen sind mit

Fügen Sie diese Code-Schnipsel zu Ihrem 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);
};

Dann in Ihrem var allowedMethods = [

hinzufügen 'removeRow'

Schließlich können Sie mit $("#your-table").bootstrapTable('removeRow',{index:1});

Credits zu diesem Beitrag

id ist kein guter Wähler jetzt. Sie können einige Eigenschaften in den Zeilen definieren. Und Sie können sie als Selektor verwenden. 

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

und Sie können eine func verwenden Sie die Zeile wie diese (ES6) wählen: 

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

rowRemover('petshop','fish');
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top