jQuery: usuwanie elementu tabeli

Coraz częściej w pracy wykorzystuję bibliotekę jQuery do osiągania różnych celów. Ostatnio z pomocą wywołania Ajax usuwałem elementy z zestawienia tabelarycznego. Sam ajax nie był za specjalnie problemem. Ciekawsze jest usuwanie elementu z wyświetlanej tabeli.


Warto zacząć od tego, aby każdy wiersz reprezentujący pojedynczy element danych posiadał swoje unikalne id. Ja na przykład użyłem w HTML id case-row-%id, gdzie %id jest przez php uzupełniane numerem id elementu z bazy.

Do usunięcia elementu z DOM wystarczy metoda remove z jQuery. "Problem" polega na tym, że użytkownik może nie zanotować tego, że coś usunął jeśli przeglądarka jest dostatecznie szybka. Warto więc użyć jakiejś animacji. Nie dość, że będzie to 'fajniej' wyglądało, to jeszcze da się zauważyć, że coś właśnie wyleciało. Ja zdecydowałem się na powolne usuwanie, więc skorzystałem z metody hide.

$('#case-row-' + id).hide('slow');

Powyższa linia kodu jedynie chowa wskazany element i jest on cały czas dostępny. Metoda hide() przyjmuje jeszcze drugi argument. Jest to callback, który jest wywoływany po zakończeniu animacji. Nie trudno więc stworzyć lepsze wywołanie:

$('#case-row-' + id).hide('slow', function() {
    ('#case-row-' + id).remove();
});

Tak oto jquery ułatwia życie. Ledwie parę linii kodu i wszystko gotowe.