jQuery: Что нужно, чтобы удалить ближайший с помощью кнопки нажмите на кнопку

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

Вопрос

У меня есть таблица HTML с одним строк и несколькими TRS, которые добавляются динамически. У каждого TR есть кнопка в последнем столбце.

Что мне нужно, чтобы нажать на кнопку, ближайший TR удаляется из таблицы? Я пытался использовать $(this).closest.remove() Но это не сработало, поэтому я предполагаю, что мне нужно добавить идентификаторы или что -то еще здесь.

Основная таблица примеров будет выглядеть следующим образом:

<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>
Это было полезно?

Решение

Вам нужно дать closest Функция селектора. Попробуй это:

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

Кроме того, ваш HTML недействителен как th должен быть ребенком 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>

Пример скрипки

Другие советы

Вы можете сделать это с помощью .closest( selector ) правильно, как:

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

На самом деле в вашем коде:

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

вам не хватает как открытия, так и закрытия скобок () и селектор tr.

http://jsfiddle.net/cpvh9/

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

Из вашего HTML -кода выглядит так, как будто вы хотите удалить родительский TR, попробуйте это

$(".btnClass").click(function(){
    $(this).parents("tr:first").remove();
});
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top