Каков наилучший способ удалить строку таблицы с помощью jQuery?

341

Вы правы:

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

Это прекрасно работает, если ваша строка имеет id, такие как:

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

Если вы не имеют id, вы можете использовать любой из jQuery's .

источник

2008-10-04 21:11:49 imjoevasquez

+0

Да, я предполагал, что строка имеет идентификатор, и у вас есть ID :) –

+2

Выполнение этого способа означает, что вам нужен один идентификатор в строке, что потенциально добавляет много накладных расходов. jQuery позволяет использовать другие подходы, более идиоматические (к подходу jQuery), продолжать чтение, есть больше предложений. –

+0

Работал отлично для меня, поскольку я смог поместить уникальный идентификатор в каждую строку. –

6

Является ли следующее приемлемым:

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

источник

2008-10-04 21:04:56

+3

Да, это приемлемо! – kamalpreet

7

function removeRow(row) { 
    $(row).remove(); 
} 

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

Возможно, что-то подобное может работать? Я не пробовал что-то делать с «этим», поэтому я не знаю, работает оно или нет.

источник

2008-10-04 21:48:55 Eikern

+1

Ну, я бы сказал, что было бы немного странно, если бы эта строка исчезла, когда вы нажмете на нее. На данный момент у меня есть ссылка в строке, чтобы удалить строку. –

82

@Eikern

Если вы собираетесь использовать JQuery, использовать JQuery человек!

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

источник

2008-10-05 01:07:26 nickf

+0

приятный, очень неинструсивный – imjoevasquez

+3

Странно, ваше решение бесконечно лучше, чем принятое. – Puzbie

+3

@jorg, просто упомянуть об этом, у вас есть опечатка в вашем ответе, после .click вы должны поставить функцию() на вызов – Franco

1

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

я думаю, что вы будете пытаться выше код, как это работает, но я не знаю, почему это работает в течение некоторого времени, а затем вся таблица удаляется. Я также пытаюсь удалить строку, щелкнув строку. но не смог найти точного ответа.

источник

2008-10-11 14:41:35

+0

Я не уверен, что вы уже пробовали $ ('tr'). Live ("click", function() {$ (this) .remove();}); – gfivehost

49

Предполагая, что у вас есть кнопка/ссылка внутри ячейки данных в вашей таблице, то, как это будет делать трюк ...

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

Это приведет к удалению родителя родителя кнопки/ссылки который щелкнут. Вам нужно использовать parent(), потому что это объект jQuery, а не обычный объект DOM, и вам нужно использовать parent() дважды, потому что кнопка находится внутри ячейки данных, которая живет внутри строки ... которая что вы хотите удалить. $ (Это) кнопка нажата, так что просто иметь что-то вроде этого будет удалить только кнопку:

$(this).remove();

В то время как это будет удалить ячейку данных:

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

Если вы хотите просто нажмите в любом месте на строке, чтобы удалить его, что-то вроде этого будет работать. Вы можете легко изменить это, чтобы побудить пользователя или работать только на двойной клик:

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

Надежда, которая помогает ... Я изо всех сил на этом немного себя.

источник

2009-03-29 04:58:14 sluther

+20

Что делать, если ссылка не находится непосредственно внутри td, но имеет, скажем, диапазон вокруг него? Я думаю, что было бы лучше сделать $ (this) .parents ('tr'). Remove(); чтобы он подошел к дереву DOM самостоятельно, найдите tr и удалите его. –

+2

Это тоже сработает. Все зависит от того, где в DOM ваша кнопка/ссылка, поэтому я дал так много примеров и такое длинное объяснение. – sluther

+2

Вы также можете использовать $ (this) .parents ('tr') – cgreeno

8

Все, что вам нужно сделать, это удалить ярлык таблицы (<tr>) из вашей таблицы. Например вот код, чтобы удалить последнюю строку из таблицы:

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

* Код выше был взят из this jQuery Howto post.

источник

2009-05-02 10:02:49 Uzbekjon

37

Вы можете использовать:

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

для нахождения родительской строки таблицы элемента.

Он более изящный, чем parent(). Parent() - это то, что я начал делать, и вскоре узнал об ошибке моих путей.

--edit - Кто-то отметил, что вопрос об удалении строки ...

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

Как указано ниже вы можете просто сделать:

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

Аналогичный код фрагмент может использоваться для многих операций, таких как запуск событий на нескольких элементах.

источник

2009-11-24 09:56:26

+3

Немного более кратким: '$ (this) .closest (" tr "). remove()' –

15

Easy .. Попробуйте это

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

источник

2010-01-11 05:20:01 Thurein

+10

Я бы изменил '$ (this) .parent(). parent(). parent() 'to' $ (this) .closest ('tr') '. Он более прочный и четко показывает, что вы выбираете. – nickf

7

попробовать это для размера

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

полный список:

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

see it in action

источник

2010-10-30 22:21:21

2

Если строка вы хотите удалить мощь чан ge, вы можете использовать это. Просто передайте этой функции строку #, которую вы хотите удалить.

function removeMyRow(docRowCount){ 
    $('table tr').eq(docRowCount).remove(); 
}

источник

2013-01-11 20:46:04 silvster27

1

, если у вас есть HTML как этот

<tr> 
<td><span class="spanUser" userid="123"></span></td> 
<td><span class="spanUser" userid="123"></span></td> 
</tr>

где userid="123" является пользовательский атрибут, который вы можете заполнить динамически при создании таблицы,

вы можете использовать что-то вроде

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

    });

Так что в этом случае вы не знаете класс или идентификатор e TR, но в любом случае вы можете удалить его.

источник

2013-05-06 12:44:45

+0

Думаю, что вживую в настоящее время не рекомендуется в пользу on, $ (". SpanUser"). On ('click', function() { – Tofuwarrior

3

Еще один по empty():

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

источник

2015-05-20 23:57:32

+1

Не удаляет ли все , но не ? Я предполагаю, браузер может автоматически удалить , но я подозреваю, что это не гарантировано. –

1

Я ценю это старый пост, но я искал сделать то же самое, и нашел принятый ответ не работает для меня. Предполагая, что JQuery движется дальше, поскольку это было написано.

Во всяком случае, я нашел следующие работал для меня:

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

Не уверен, если это помогает никому. Мой пример выше был частью более крупной функции, поэтому не завершал ее в прослушиватель событий.

источник

2016-08-19 12:55:30 SparkyUK2104

1

Я использовал это в моем коде:

> $("#tbl").on("click", ".delete-row", function() { 
>     $(this).closest('tr').remove(); 
>    });

источник

2017-10-06 08:01:28

0

идентификатор не хороший селектор в настоящее время. Вы можете определить некоторые свойства в строках. И вы можете использовать их как селектор.

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

и вы можете использовать FUNC, чтобы выбрать строку, как это (ES6):

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

rowRemover('petshot','fish');

источник

2017-10-06 08:12:40

Каков наилучший способ удалить строку таблицы с помощью jQuery?

ответ

Смежные вопросы