jQuery: lo que se necesita para eliminar más cerca con el botón Haga clic en

Question

Tengo una tabla HTML con una primera fila y varios TR que se agregan dinámicamente. Cada TR tiene un botón en la última columna.

¿Qué necesito para que, al hacer clic en el botón, el TR más cercano se elimina de la tabla? Intenté usar $(this).closest.remove() Pero esto no funcionó, así que supongo que necesito agregar identificaciones o algo más aquí.

Una tabla de ejemplo básica se vería como la siguiente:

<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

Necesitas dar el closest funcionar un selector. Prueba esto:

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

Además, su HTML no es válido como th debería ser un hijo de 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>

Ejemplo de violín

Answer 2

Puedes hacer esto usando .closest( selector ) correctamente como:

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

En realidad en tu código:

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

Te falta tanto el paréntesis de apertura como de cierre () y el selector tr.

Answer 3

http://jsfiddle.net/cpvh9/

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

Answer 4

Desde su código HTML, parece que desea eliminar el Padre TR, intente esto

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