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

Question

Was ist die beste Methode, um mit jQuery eine Tabellenzeile zu entfernen?

Answer 1

Du hast recht:

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

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

blah

Wenn du keine id hast, kannst du einen beliebigen der vielen Selektoren von jQuery verwenden.

Answer 2

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

Selbst eine bessere

$("#MyTable").on("click", "#DeleteButton", function() {
   $(this).closest("tr").remove();
});

Answer 3

Angenommen Sie haben einen Button/Link in einer Datenzelle Ihrer Tabelle, könnte etwas wie das hier funktionieren...

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

Dadurch wird das Elternteil des Elternteils des angeklickten Buttons/Links entfernt. Sie müssen parent() verwenden, weil es sich um ein jQuery-Objekt handelt, nicht um ein normales DOM-Objekt, und Sie müssen parent() zweimal verwenden, weil der Button in einer Datenzelle lebt, die sich in einer Zeile befindet.... dass ist was Sie entfernen möchten. $(this) ist der angeklickte Button, daher wird nur der Button selbst entfernt:

$(this).remove();

Während dies die Datenzelle entfernt:

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

Wenn Sie einfach überall in der Zeile klicken möchten, um sie zu entfernen, könnte etwas wie das hier funktionieren. Sie könnten dies leicht anpassen, um den Benutzer zur Bestätigung aufzufordern oder nur bei einem Doppelklick zu funktionieren:

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

Answer 4

Sie können verwenden:

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

um die Eltern-Tabellezeile eines Elements zu finden.

Es ist eleganter als parent().parent(), was ich am Anfang gemacht habe und bald den Fehler meiner Wege erkannte.

--Edit -- Jemand wies darauf hin, dass die Frage nach dem Entfernen der Zeile ging...

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

Wie unten erwähnt, können Sie einfach:

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

Ein ähnlicher Code-Schnipsel kann für viele Operationen verwendet werden, wie das Auslösen von Ereignissen auf mehreren Elementen.

Answer 5

Einfach.. Probieren Sie das

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