Usunięcie diva po kliknięciu w button.

Question

Cześć, zacząłem tworzyć małą "aplikację webową", ale na starcie natknąłem się na pewien problem i nie wiem jak go rozwiązać :D

Chodzi o to aby po kliknięciu na button "Usuń" usuwał się cały div z ćwiczeniem (cały biały prostokąt).

Wymyśliłem więc, że po kliknięciu na button dodam klasę, która będzie miała display:none.

Tylko tutaj pojawia się problem, jak to ogarnąć żeby po kliknięciu usuwał się tylko jeden div, ten w którym jest kliknięty button "Usuń".

Nie chce gotowego kodu tylko jakiejś koncepcji w jaki sposób mogę to ogarnąć.

Answer 1

Witam, ja osobiście w takich sytuacjach lubię korzystać z możliwości jaką daje nawet zdarzenie. Otóż może nie będzie to zbyt eleganckie, lecz na pewno spełni swoją rolę, a dokładniej mówię o funkcji wykonywanej po wciśnięciu buttona (trzeba ją przypisać):

Wydaje mi się, że w twoim kodzie taka funkcja będzie usuwała cały DIV

function delete (event){
let cth = event.target;
cth.parentNode.parentNode.parentNode.remove(cth.parentNode.parentNode):
}

 

Answer 2

Znalazłem trochę szybszy sposób:

$(document).ready(function(){
	$('.remove').click(function(){
		$(this).parent().remove();
	});
});

Tylko czy jest możliwość, aby po odświeżeniu diva nadal nie było?

Answer 3

Tylko czy jest możliwość, aby po odświeżeniu diva nadal nie było?

Zapisywać sobie np. do localStorage dane i odczytywać po załadowaniu strony. Podczas usuwania danego diva, usuwasz go także z localStorage. Sposób reprezentacji pozostawiam Tobie. Można by do tego wykorzystać np. obiekty albo po prostu zapisywać jakieś atrybuty danego diva jakby było prościej.