JQuery: Was ist erforderlich, um mit Klick auf die Schaltfläche am nächsten zu entfernen

Question

Ich habe eine HTML -Tabelle mit einer TH -Zeile und mehreren TRs, die dynamisch hinzugefügt werden. Jeder TR hat eine Taste in der letzten Spalte.

Was brauche ich, damit durch Klicken auf die Schaltfläche der nächstgelegene TR aus der Tabelle entfernt wird? Ich habe versucht zu benutzen $(this).closest.remove() Aber das hat nicht funktioniert, also gehe ich davon aus, dass ich hier IDs oder etwas anderes hinzufügen muss.

Eine grundlegende Beispieltabelle würde wie folgt aussehen:

<table class='tableClass'>
    <tbody>
        <th>
            <td>Text</td><td>Text</td><td>Text</td>
        </th>
        <tr>
            <td>Text</td><td>Text</td><td><button type='button' class='btnClass'>Delete</button></td>
        </tr>
        <tr>
            <td>Text</td><td>Text</td><td><button type='button' class='btnClass'>Delete</button></td>
        </tr>
        <tr>
            <td>Text</td><td>Text</td><td><button type='button' class='btnClass'>Delete</button></td>
        </tr>
    </tbody>
</table>

Answer 1

Sie müssen das geben closest Funktionen Sie einen Selektor. Versuche dies:

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

Auch Ihr HTML ist ungültig als th sollte ein Kind von sein tr:

<table class='tableClass'>
    <tbody>
        <tr>
            <th>Text</th>
            <th>Text</th>
            <th>Text</th>
        </tr>
        <tr>
            <td>Text</td>
            <td>Text</td>
            <td>
                <button type='button' class='btnClass'>Delete</button>
            </td>
        </tr>
        <tr>
            <td>Text</td>
            <td>Text</td>
            <td>
                <button type='button' class='btnClass'>Delete</button>
            </td>
        </tr>
        <tr>
            <td>Text</td>
            <td>Text</td>
            <td>
                <button type='button' class='btnClass'>Delete</button>
            </td>
        </tr>
    </tbody>
</table>

Beispiel Geige

Answer 2

Sie können dies verwenden .closest( selector ) richtig wie:

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

Eigentlich in Ihrem Code:

$(this).closest.remove()
            ___^___

Sie vermissen sowohl die Öffnungs- als auch die Schließung von Klammern () und der Selektor tr.

Answer 3

http://jsfiddle.net/cpvh9/

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

Answer 4

Versuchen Sie dies aus Ihrem HTML -Code aus, dass Sie übergeordnete TR entfernen möchten

$(".btnClass").click(function(){
    $(this).parents("tr:first").remove();
});