jak usunąć/ukryć wybrany blok div ? Opcje

[InosU31]

Witam

Mam problem z usunięciem/schowaniem danego bloku div. Gdy użyję funkcji .each to chowa mi wszystkie bloki - prawdopodobnie dlatego, że wykonuję tą funkcję w innym nadrzędnym div - ale muszę ją tam wykonywać. Ogólnie zaczytuję przez php wszystkie .caly_div ale #potwierdź_usun w którym ma się wykonywać funkcja do ukrywania div jest poza .caly_div. Do rzeczy:

[HTML] pobierz, plaintext 
<div id="nadrzedny" style="padding:10px 20px 20px 20px;">
     <div class="caly_div" rel="15">
 
                 <a class="confirm" href="#15">Zakończ</a>
 
</div>
 
     <div class="caly_div" rel="2">
 
                 <a class="confirm" href="#2">Zakończ</a>
 
</div>
 
     <div class="caly_div" rel="7">
 
                 <a class="confirm" href="#7">Zakończ</a>
 
</div>
</div>
<div id="potwierdz_usun"></div>
 
 
[HTML] pobierz, plaintext 

[XML] pobierz, plaintext 
$(".confirm").click(function(){	
$("#potwierdz_usun")
.css({opacity:0.85})
.fadeIn()
.html('<div><div><h3>Czy zakończyć?</h3><p><form><button type="button" class="formZakoncz" id="button_login" style="padding: 5px 10px;margin-right:10px;" onClick=\"location.href=\'' + $(this).attr("href") + '\'\">Tak</button> <button type="button"  value="Nie" id="button_login" style="padding: 5px 10px;">Nie</button></form></p></div></div>');
 
 
 
$(".formZakoncz").click(function(){
 
	//grab the full url
		var hash = this.href;
   //generate the parameter for the php script
	var data = 'page=' + encodeURIComponent(document.location.hash);
	$.ajax({
		url: "panel/linki/zakonczenie_ajax.php",	
		type: "GET",		
		data: data,		
		cache: false,
		success: function (html) {	
 
 
                 $('.caly_div').each(function(){
 
    $(this).hide();                                                        ---------------------- w tym miejscu ma być ta funkcja ------------------
   	 return false;
		});	
		}		
	});
 
 
});
//--koniec confirm
});	
 
$("#potwierdz_usun").click(function(){$(this).fadeOut();});
 
[XML] pobierz, plaintext 

Proszę o jakieś podpowiedzi bo kombinuję już kilka dni i mi się już pomysły skończyły.

Pozdrawiam i z góry dziękuję

[sunpietro]

Nie do końca zrozumiałem problem.
Chcesz usuwać wszystkie divy z klasą .caly_div po kliknięciu w #potwierdz_usun, tak?
Jeśli tak, to wystarczy że zrobisz coś takiego:

Kod

$("#potwierdz_usun").click(function() {
    $(this).fadeOut();

    $('.caly_div').each(function() {
        $(this).hide();                                                    
    });
});

[InosU31]

Witam

na początek dziękuję za zainteresowanie :-)

Chce usunąć/schować konkretny ".cały_div". Gdy odpalam ".confirm" otwiera mi się okienko z potwierdzeniem (#potwierdz_usun) - opcja Tak i Nie. Gdy kliknę na Tak wykonuje się ".formZakoncz" i cały ajax w którym będę sobie usuwał dane z bazy danych. Wszytko jak do tej pory robię po Get. Po tym usunięciu chciałbym aby div ".cały_div" się schował. Problem polega na tym że mam kilkanaście tych bloków ".caly_div" i w zależności w który ".confirm" kliknę chciałbym aby ten konkretny się usunął a nie wszystkie. mam nadzieję że trochę jaśniej napisałem.

Dodam tylko że okno z potwierdzeniem jest poza wszystkimi blokami .caly_div z tego względu że ma przeźroczyste tło i gdybym umieścił to potwierdzenie wewnątrz bloku ".caly_div" to by przyciemniło tylko ten jeden ".caly_div" nie całą stronę.

Pozdrawiam

[viking]

Dajesz:before warstwę pokrywająca i nie ma znaczenia gdzie się znajduje. Na szybko możesz utworzyć zmienną przechowującą klikniety element i później na tym pracować dalej (kopia obiektu), możesz w selektorze wyszukać atrybut z konkretnym rel jesli są unikalne.

[InosU31]

Witam

Dzięki viking za podpowiedz :-)

Udało się choć nie wiem czy do końca jest to poprawne ale grunt że działa :-)

Dodałem po ".confirm" w jquery zmienna:

[XML] pobierz, plaintext 
$(".confirm").click(function(){	
 
var relLink = $(this).attr("rel");     //-- to dodałem
 
$("#potwierdz_usun")
.css({opacity:0.85})
.fadeIn()
.html('<div><div><h3>Czy zakończyć?</h3><p><form><button type="button" class="formZakoncz" id="button_login" style="padding: 5px 10px;margin-right:10px;" onClick=\"location.href=\'' + $(this).attr("href") + '\'\">Tak</button> <button type="button"  value="Nie" id="button_login" style="padding: 5px 10px;">Nie</button></form></p></div></div>');
 
 
 
$(".formZakoncz").click(function(){
 
	//grab the full url
		var hash = this.href;
   //generate the parameter for the php script
	var data = 'page=' + encodeURIComponent(document.location.hash);
	$.ajax({
		url: "panel/linki/zakonczenie_ajax.php",	
		type: "GET",		
		data: data,		
		cache: false,
		success: function (html) {	
 
 
                 $('.caly_div'+relLink).each(function(){             //--- tu dodałem 
 
    $(this).hide();                                                       
   	 return false;
		});	
		}		
	});
 
 
});
//--koniec confirm
});	
 
$("#potwierdz_usun").click(function(){$(this).fadeOut();});
 
[XML] pobierz, plaintext 

a w kodzie html:

[HTML] pobierz, plaintext 
<div id="nadrzedny" style="padding:10px 20px 20px 20px;">
     <div class="caly_div15">
 
                 <a class="confirm" href="#15" rel="15">Zakończ</a>
 
</div>
 
     <div class="caly_div2">
 
                 <a class="confirm" href="#2" rel="2">Zakończ</a>
 
</div>
 
     <div class="caly_div7">
 
                 <a class="confirm" href="#7" rel="7">Zakończ</a>
 
</div>
</div>
<div id="potwierdz_usun"></div>
 
[HTML] pobierz, plaintext 

czyli każdy ".caly_div" ma inną nazwę a przez to jest innym blokiem ;-) Później funkcja "each" która wyszukuje mi ten konkretny div. Liczby w nazwie generuję za pomocą php i mysql ;-)

Chciałem to zrobić na zasadzie: "wyszukaj .caly_div który zawiera link rel="x".." ale nie potrafię się za bardzo posługiwać instrukcjami w jquery choć w php potrafię.


Pozdrawiam

Ten post edytował InosU31 21.05.2017, 15:15:57

[viking]

To raczej brak podstaw CSS na którym operuje sizzle.
https://jsfiddle.net/4Lt6d3zL/

[soliniak]

Czy zamiast tej formy

[JAVASCRIPT] pobierz, plaintext 
$(".formZakoncz").click(function(){
[JAVASCRIPT] pobierz, plaintext 

Nie powinno używać się:

[JAVASCRIPT] pobierz, plaintext 
$(".formZakoncz").on('click', function(){
[JAVASCRIPT] pobierz, plaintext 

?