247
Jaka jest najlepsza metoda usuwania wiersza tabeli z jQuery?Jaki jest najlepszy sposób na usunięcie wiersza tabeli z jQuery?
A
Odpowiedz
341
Masz rację:
$('#myTableRow').remove();
Działa to dobrze, czy rząd ma id, takich jak:
<tr id="myTableRow"><td>blah</td></tr>
Jeśli nie posiadasz id, możesz użyć dowolnego z jQuery's .
+0
Tak, zakładałem, że wiersz ma identyfikator i masz identyfikator :) –
+2
Wykonanie tego w ten sposób oznacza, że potrzebujesz jednego identyfikatora w wierszu, co potencjalnie zwiększa obciążenie. jQuery pozwala na inne podejścia, które są bardziej idiomatyczne (do podejścia jQuery), kontynuuj czytanie, jest więcej sugestii. –
+0
Sprawdziło się doskonale, ponieważ udało mi się umieścić unikatowy identyfikator w każdym rzędzie. –
6
jest następujące dopuszczalne:
$('#myTableRow').remove();
+3
Tak, jest to do zaakceptowania! – kamalpreet
7
function removeRow(row) {
$(row).remove();
}
<tr onmousedown="removeRow(this)"><td>Foo</td></tr>
Może coś takiego może również zadziałać? Nie próbowałem robić czegoś z "tym", więc nie wiem, czy to działa, czy nie.
+1
Cóż, powiedziałbym, że byłoby trochę dziwnie, gdyby rząd zniknął po kliknięciu. W tej chwili mam link w wierszu, aby usunąć wiersz. –
82
Jeśli masz zamiar użyć jQuery użyć jQuery człowieka!
$('#myTable tr').click(function(){
$(this).remove();
return false;
});
+0
miło, bardzo nie instrusive – imjoevasquez
+3
Dziwne, twoje rozwiązanie jest nieskończenie lepsze od zaakceptowanego. – Puzbie
+3
@jorg, żeby o tym wspomnieć, masz literówkę w odpowiedzi, po .click musisz umieścić funkcję() oddzwonić – Franco
1
$('tr').click(function()
{
$(this).remove();
});
myślę, że będzie próbować powyższy kod, jak to działa, ale nie wiem, dlaczego to działa na jakiś czas, a potem cały stół jest usuwany. Próbuję też usunąć wiersz, klikając wiersz. ale nie mógł znaleźć dokładnej odpowiedzi.
+0
Nie jestem pewien, czy już wypróbowałeś $ ('tr'). Live ("click", function() {$ (this) .remove();}); – gfivehost
49
Zakładając, że przycisk/link wewnątrz komórki danych w tabeli, coś takiego by rade ...
$(".delete").live('click', function(event) {
$(this).parent().parent().remove();
});
To usunie rodzica rodzica przycisku/link to jest kliknięte. Musisz użyć parent(), ponieważ jest to obiekt jQuery, a nie normalny obiekt DOM, i musisz dwukrotnie użyć parent(), ponieważ przycisk znajduje się wewnątrz komórki danych, która znajduje się wewnątrz wiersza .... co chcesz usunąć. $ (This) to przycisk kliknięty, więc po prostu o coś takiego usunie tylko przycisk:
$(this).remove();
Chociaż usunie komórkę danych:
$(this).parent().remove();
Jeśli chcesz po prostu kliknij w dowolnym w wierszu, aby go usunąć, coś takiego by działało. Można łatwo zmodyfikować to poprosi użytkownika lub działać tylko na podwójne kliknięcie:
$(".delete").live('click', function(event) {
$(this).parent().remove();
});
nadzieję, że pomoże ... Walczyłem o tym trochę siebie.
+20
Co się stanie, jeśli link nie znajduje się bezpośrednio w td, ale ma na przykład rozpiętość wokół niego? Myślę, że lepiej byłoby zrobić $ (this) .parents ('tr'). Remove(); aby pozwolić mu samemu podejść do drzewa DOM, znaleźć tr i usunąć go. –
+2
To też by działało. Wszystko zależy od tego, gdzie w DOMu znajduje się twój przycisk/link, dlatego podałem tak wiele przykładów i tak długich wyjaśnień. – sluther
+2
Możesz również użyć $ (this) .parents ('tr') – cgreeno
8
Wszystko, co musisz zrobić, to usunąć wiersz tabeli (<tr>) ze swojej tablicy. Na przykład tutaj jest kod, aby usunąć ostatni wiersz z tabeli:
$('#myTable tr:last').remove();
* Kod powyżej została podjęta z this jQuery Howto post.
37
Można użyć:
$($(this).closest("tr"))
za znalezienie nadrzędny wiersz tabeli elementu.
To jest bardziej eleganckie niż rodzicielskie(). Parent(), to jest to, co zacząłem robić i wkrótce nauczyłem się błędu na moich drogach.
--edit - Ktoś zwrócił uwagę, że pytanie było o usunięciu wiersza ...
$($(this).closest("tr")).remove()
Jak wskazano poniżej można po prostu zrobić:
$(this).closest('tr').remove();
Podobny kod Fragment można wykorzystać do wielu operacji, takich jak uruchamianie zdarzeń na wielu elementach.
+3
Trochę bardziej zwięzły: '$ (this) .closest (" tr "). remove()' –
15
Łatwy .. Spróbuj tego
$("table td img.delete").click(function() {
$(this).parent().parent().parent().fadeTo(400, 0, function() {
$(this).remove();
});
return false;
});
+10
Zmieniłbym '$ (this) .parent(). parent(). parent() 'to' $ (this) .closest ('tr') '. Jest bardziej wytrzymały i wyraźnie pokazuje, co wybierasz. – nickf
7
spróbować tego dla rozmiaru
$(this).parents('tr').first().remove();
pełny wykaz:
<!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>
2
Jeśli wiersz chcesz usunąć potęgę Chan ge możesz tego użyć. Po prostu przekaż tej funkcji wiersz #, który chcesz usunąć.
function removeMyRow(docRowCount){
$('table tr').eq(docRowCount).remove();
}
1
jeśli masz HTML jak to
<tr>
<td><span class="spanUser" userid="123"></span></td>
<td><span class="spanUser" userid="123"></span></td>
</tr>
gdzie userid="123" jest zwyczaj atrybutów, które można wypełnić dynamicznie podczas tworzenia tabeli
można użyć coś podobnego
$(".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.');
}
});
});
W takim przypadku nie znasz klasy lub identyfikatora użytkownika Tag e TR, ale mimo to możesz go usunąć.
+0
think live jest teraz przestarzałe na rzecz $ (". SpanUser"). On ("click", function() { – Tofuwarrior
3
Kolejny przez empty():
$(this).closest('tr').empty();
+1
Czy to nie usuwa wszystkich
1
Doceniam to stary post, ale szukałem zrobić to samo, a okazało się, że przyjęte rozwiązanie nie działa dla mnie. Zakładając, że JQuery został przeniesiony, ponieważ zostało to napisane.
Byle jak, znalazłem następujący pracował dla mnie:
$('#resultstbl tr[id=nameoftr]').remove();
Nie wiem, czy to pomaga nikomu. Mój powyższy przykład był częścią większej funkcji, więc nie zawijam go w detektorze zdarzeń.
1
I Used To w moim kodu:
> $("#tbl").on("click", ".delete-row", function() {
> $(this).closest('tr').remove();
> });
0
id nie jest dobrym selektor teraz. Możesz zdefiniować niektóre właściwości w wierszach. I możesz ich użyć jako selektora.
<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>
i można użyć func wybrać wiersz tak (ES6):
const rowRemover = (category,type)=>{
$('tr[category=${category}][type=${type}]').remove();
}
rowRemover('petshot','fish');
Oto doskonały artykuł http://codepedia.info/2015/02/remove-table-row- tr-in-jquery o tym, jak usunąć wiersz tabeli nawet dla dynamicznie dodanych wierszy –