Usuwanie komórki w tabeli przy pomocy jQuery/JS

pytanie zadane 21 marca 2018 w JavaScript przez miro Pasjonat (23,870 p.)

Jak przy pomocy JS a najlepiej jQuery po kliknięciu na komórkę usunąć ją (ewentualnie dodać). Problem w tym aby zrobić to tak, aby niżej znajdujące się komórki wskoczyły o jeden wiersz wyżej. Poniżej obrazek który to obrazuje: klikam w B2 i wszystkie poniżej komórki się przesuwają aby zrównały się z zawartością z lewej kolumny. Niestety metody z jQuery jak remove() nie rozwiązują problemu. Jedynie co chodzi mi po głowie to po kliknięciu zczytać wszystkie wartości do tablic usunąć tabelę html i zbudować od nowa, już bez jednej wartości. Może istnieje prostszy sposób?

komentarz 21 marca 2018 przez ScriptyChris Mędrzec (190,190 p.)

Niestety metody z jQuery jak remove() nie rozwiązują problemu

Pokaż jak to próbowałeś zrobić.

komentarz 21 marca 2018 przez miro Pasjonat (23,870 p.)

  $("td").click(function(){
        $(this).remove();
    });

komentarz 21 marca 2018 przez ScriptyChris Mędrzec (190,190 p.)

Podepnij się pod <tr> i po prostu usuń kliknięty <td>:

$( 'tr' ).click( 'td', function( event ) {
  this.removeChild( event.target );
} );

Można też podpiąć się pod całą tabelę i sobie sterować, czy usuwać cały wiersz, czy pojedynczą komórkę.

komentarz 21 marca 2018 przez miro Pasjonat (23,870 p.)

Dzięki za odpowiedź, chyba źle wytłumaczyłem mój problem. Usuwanie td nie przeniesie innych komórek z kolumny do góry. W moim przykładzie klikam w B2 i chcę aby wszystkie komórki przeniosły się o jeden wiersz wyżej. Zrównały się z zawartością aby w obu wierszach znalazły się te same (w tym przykładzie) numery.

komentarz 21 marca 2018 przez ScriptyChris Mędrzec (190,190 p.)

Czyli po kliknięciu w <td>, chcesz usunąć <tr>, w którym ta komórka się znajduje - co spowoduje przesunięcie wszystkich wierszy poniżej o jeden do góry (w miejsce usuniętego)?

komentarz 21 marca 2018 przez miro Pasjonat (23,870 p.)

Ja usunę <tr> to dane z drugiej kolumny<td> usuną się także. Nie wiem właśnie jak przesunąć wszystkie wiersze z jednej kolumny do góry w miejsce pustego. Pytam się czy jest jakiś łatwy sposób o którym nie wiem bo przez usuwanie chyba tego nie zrobię. Może muszę w pętli wszystkie dane z komórki poniżej pustej przekopiować o jeden wyżej.

komentarz 21 marca 2018 przez ScriptyChris Mędrzec (190,190 p.)

jak przesunąć wszystkie wiersze z jednej kolumny do góry w miejsce pustego

Nie rozumiem już. Chcesz po kliknięciu w <td> usunąć tą komórkę i przesunąć tylko komórki z poniższych wierszy tej kolumny do góry? Czy możesz rozrysować/rozpisać jak to ma wyglądać w tych dwóch przypadkach: przed kliknięciem i po?

komentarz 21 marca 2018 przez miro Pasjonat (23,870 p.)

Właśnie o to mi chodziło, a pisząc wiersze z jednej kolumny chodziło mi o komórki z jednej kolumny.

Chcesz po kliknięciu w <td> usunąć tą komórkę

Nie wiem czy przez usuwanie, osiągnę mój cel.
Przed kliknięciem popatrz na mój obrazek. Po kliknięciu wszystkie wiersze będę posiadać takie same wartości np:
1 | 1
2 | 2
3 | 3
4 | 4

1	komentarz 21 marca 2018 przez ScriptyChris Mędrzec (190,190 p.) W ten sposób? https://codepen.io/ChrissP92/pen/KomNwR

komentarz 22 marca 2018 przez miro Pasjonat (23,870 p.)

Dzięki właśnie o to dokładnie mi chodziło. Myślałem, że kod będzie mniej rozbudowany. Kilku rzeczy nie rozumiem i jest zbyt późno więc jutro bardziej się przyjrzę, jednak coś się wykrzacza przy większej ilości wierszy.
https://codepen.io/anon/pen/Gxmmqr?editors=1010