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

Antworten:

434

Du hast recht:

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

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

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

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

imjoevasquez
quelle
Ja, ich nahm an, dass die Reihe eine ID hat und Sie die ID haben :)
Darryl Hein
2
Wenn Sie dies auf diese Weise tun, benötigen Sie eine ID pro Zeile, was möglicherweise viel Overhead verursacht. jQuery erlaubt andere Ansätze, die idiomatischer sind (zu jQuerys Ansatz). Lesen Sie weiter, es gibt mehr Vorschläge.
Ian Lewis
Hat für mich hervorragend funktioniert, da ich in jede Zeile eine eindeutige ID einfügen konnte.
Jim Evans
2
Tolles Zeug! JQuery ist die Zukunft!
Heinkasner
1
"Jefe, was ist eine Fülle?"
Pete
110 
$('#myTable tr').click(function(){
    $(this).remove();
    return false;
});

Noch besser 

$("#MyTable").on("click", "#DeleteButton", function() {
   $(this).closest("tr").remove();
});
nickf
quelle
4
Seltsam, Ihre Lösung ist unendlich besser als die akzeptierte.
Entspannen in Zypern
3
@jorg, um es nur zu erwähnen, Sie haben einen Tippfehler in Ihrer Antwort, nach dem .click müssen Sie die Funktion () zurückrufen
Franco
7
auch $ (this) .closest ('tr'). remove ();
LeRoy
61

Angenommen, Sie haben eine Schaltfläche / einen Link in einer Datenzelle in Ihrer Tabelle, dann würde so etwas den Trick machen ...

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

Dadurch wird das übergeordnete Element des übergeordneten Elements der Schaltfläche / des Links entfernt, auf die / das geklickt wird. Sie müssen parent () verwenden, da es sich um ein jQuery-Objekt handelt, nicht um ein normales DOM-Objekt, und Sie müssen parent () zweimal verwenden, da sich die Schaltfläche in einer Datenzelle befindet, die sich in einer Zeile befindet was Sie entfernen möchten. $ (this) ist die Schaltfläche, auf die geklickt wird. Wenn Sie also einfach so etwas haben, wird nur die Schaltfläche entfernt:

$(this).remove();

Während dies die Datenzelle entfernt:

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

Wenn Sie einfach auf eine beliebige Stelle in der Zeile klicken möchten, um sie zu entfernen, funktioniert so etwas. Sie können dies leicht ändern, um den Benutzer dazu aufzufordern, oder nur mit einem Doppelklick arbeiten:

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

Hoffe das hilft ... Ich habe mich selbst ein bisschen darum bemüht.

Sluther
quelle
25
Was ist, wenn sich der Link nicht direkt im td befindet, sondern beispielsweise eine Spanne hat? Ich denke, es wäre besser, $ (this) .parents ('tr'). Remove (); Um es den DOM-Baum alleine hochlaufen zu lassen, finden Sie das tr und entfernen Sie es.
Paolo Bergantino
2
Das würde auch funktionieren. Es hängt alles davon ab, wo sich im DOM Ihre Schaltfläche / Ihr Link befindet. Deshalb habe ich so viele Beispiele und eine so lange Erklärung gegeben.
Sluther
2
Sie können auch $ (this) .parents ('tr')
cgreeno
7
.live wurde in jQuery 1.7 veraltet und in 1.9 entfernt. Siehe jQuery.live
42

Sie können verwenden:

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

zum Suchen der übergeordneten Tabellenzeile eines Elements.

Es ist eleganter als parent (). Parent (), was ich anfing und bald den Fehler meiner Wege lernte.

--Edit - Jemand wies darauf hin, dass es um das Entfernen der Zeile ging ...

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

Wie unten ausgeführt, können Sie einfach Folgendes tun:

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

Ein ähnliches Code-Snippet kann für viele Vorgänge verwendet werden, z. B. zum Auslösen von Ereignissen für mehrere Elemente.

Ian Lewis
quelle
4
Etwas prägnanter:$(this).closest("tr").remove()
Barry Kaye
15

Einfach .. Versuchen Sie dies

$("table td img.delete").click(function () {
    $(this).parent().parent().parent().fadeTo(400, 0, function () { 
        $(this).remove();
    });
    return false;
});
Thurein
quelle
10
Ich würde ändern $(this).parent().parent().parent()zu $(this).closest('tr'). Es ist robuster und zeigt deutlich, was Sie auswählen.
Nickf
10

Ist folgendes akzeptabel:

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

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

Vielleicht könnte so etwas auch funktionieren? Ich habe nicht versucht, etwas mit "diesem" zu tun, daher weiß ich nicht, ob es funktioniert oder nicht.

Eikern
quelle
1
Nun, ich würde sagen, das wäre etwas seltsam, wenn die Zeile verschwindet, wenn Sie darauf klicken. Im Moment habe ich einen Link in der Zeile, um die Zeile zu löschen.
Darryl Hein
8

Sie müssen lediglich das <tr>Tag table row ( ) aus Ihrer Tabelle entfernen . Hier ist zum Beispiel der Code zum Entfernen der letzten Zeile aus der Tabelle:

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

* Der obige Code stammt aus diesem jQuery Howto-Beitrag .

Usbekjon
quelle
7

Versuchen Sie dies für die Größe

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

vollständige Auflistung:

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

sehen Sie es in Aktion

Tim Abell
quelle
4

Ein anderer von empty():

$(this).closest('tr').empty();
Pichet Thantipiputpinyo
quelle
1
Entfernt das nicht alle <td>, aber nicht die <tr>? Ich vermute, der Browser entfernt das <tr> möglicherweise automatisch, aber ich vermute, dass dies nicht garantiert ist.
Darryl Hein
2

Wenn sich die zu löschende Zeile möglicherweise ändert, können Sie diese verwenden. Übergeben Sie dieser Funktion einfach die Zeile #, die Sie löschen möchten.

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

Ich denke, Sie werden den obigen Code ausprobieren, da er funktioniert, aber ich weiß nicht, warum er irgendwann funktioniert, und dann wird die gesamte Tabelle entfernt. Ich versuche auch, die Zeile durch Klicken auf die Zeile zu entfernen. konnte aber keine genaue Antwort finden.

Asim Sajjad
quelle
Ich bin nicht sicher, ob Sie bereits $ ('tr') ausprobiert haben. Live ("click", function () {$ (this) .remove ();});
Gfivehost
1

wenn Sie HTML wie dieses haben 

<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 füllen können, wenn Sie die Tabelle erstellen?

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

     });

In diesem Fall kennen Sie die Klasse oder ID des TRTags nicht, können es aber trotzdem löschen.

Entwickler
quelle
think live ist jetzt zugunsten von on, $ (". spanUser") veraltet. on ('click', function () {
Tofuwarrior
1

Ich schätze, dass dies ein alter Beitrag ist, aber ich habe versucht, dasselbe zu tun, und festgestellt, dass die akzeptierte Antwort bei mir nicht funktioniert hat. Angenommen, JQuery ist seit dem Schreiben weitergegangen.

Jedenfalls fand ich, dass Folgendes für mich funktioniert hat:

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

Ich bin mir nicht sicher, ob dies jemandem hilft. Mein Beispiel oben war Teil einer größeren Funktion, also nicht in einen Ereignis-Listener eingeschlossen.

SparkyUK2104
quelle
0

Wenn Sie Bootstrap-Tabellen verwenden

Fügen Sie dieses Code-Snippet zu Ihrer bootstrap_table.js hinzu

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 deinem var allowedMethods = [

hinzufügen 'removeRow'

Endlich können Sie verwenden $("#your-table").bootstrapTable('removeRow',{index:1});

Credits zu diesem Beitrag

Ricks
quelle
0

id ist jetzt kein guter Selektor. Sie können einige Eigenschaften für die 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 Funktion verwenden, um die Zeile wie folgt auszuwählen (ES6):

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

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

Die einfachste Methode, um Zeilen aus der Tabelle zu entfernen:

  1. Entfernen Sie die Tabellenzeile mit ihrer eindeutigen ID.
  2. Entfernen Sie basierend auf der Reihenfolge / dem Index dieser Zeile. Beispiel: Entfernen Sie die dritte oder fünfte Reihe.

Zum Beispiel:

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