Hi, Im trying to delete my images using jquery ajax and php.

And I already have everything working fine, but now Im trying to do a confirmation message in a dialog, and if user clicks on "yes" I do my delete and if user clicks in "no" I close my dialog.

But Im having some difficults with my jQuery, when I click on my delete link Im opening my dialog, its ok, but my when I click in my "no" I dont close my dialog.

And also When I click in yes, I want to remove but I also want to close my dialog but its not working correctly.

Do you see what Im doing wrong?

So I have my dialog:

1. <div class="delete_dialog">
2.     <div class="delete">
3.      <p>Are you sure you want to remove this image?</p>
4.         <a href="#" id="delete">Yes</a>
5.         <a href="#" id="toggleDialog">No</a>
6.     </div>
7. </div>

And my html for my gallery:

1. <div class="galery">          
2. <?php
3. echo '<ul>';
4. while ($result = $read->fetch(PDO::FETCH_ASSOC)){
5. echo '<li id="'.$result['id'].'">';
6. echo '<img src="'.$result['img'].' />';
7. echo '<a href="#" id="'.$result['id'].'" class="galerydel">Delete</a>';
8. echo '</li>';
9. }
10. echo '</ul>';
11. }
12. ?>        
13. </div><!--/gallery-->

And my jquery:

1. var url = 'delImages.php';
2. $('.galerry ul').on('click','.galerrydel',function(){
3. var delid = $(this).attr('id');
4. $('.delete_dialog').fadeIn("slow",function(){
5. ('.delete').fadeIn("slow");
6. });
7. $("a#delete").click(function(){
8. $('.galerry ul li[id="'+ delid +'"]').css('background','red');
9. $.post(url,{actin:'del_imgl',image:delid},function(){
10. window.setTimeout(function(){
11. $('.galerry ul li[id="'+ delid +'"]').fadeOut("slow");
12. },500);
13. $('.delete').fadeOut("fast",function(){
14. $('.delete_dialog').fadeOut("fast"); 
15. });
16. });
17. $("a#toggleDialog").click(function(){
18. $('.delete').fadeOut("fast",function(){
19. $('.delete_dialog').fadeOut("fast"); 
20. });
21. });
22. });
23. return false;
24. })

And then my css:

1. .delete_dialog{display:none;position:fixed; left:0px; top:0px; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:104;}
2. .delete_dialog .delete{padding:30px; width:260px; text-align:center; background:#fff; position:absolute; left:50%; top:50%; margin-top:-80px; margin-left:-160px;}