Удаление подтверждения с помощью всплывающего сообщения (jQuery)

Question

У меня есть кнопка с классом .delete Когда я нажимаю на нее, я хочу запустить код jQuery.
Прежде всего, я хочу сделать это:
$('.pop-up-alert').addClass('clicked');

Затем мне нужно запустить функцию с если/другое если/другое statments.

1. Если .no-btn нажата, я хочу сделать это:
   $('.pop-up-alert').removeClass('clicked');

2. Else если .yes-btn щелкнул, я хочу сделать это:
   $(.delete).parent().remove(); // на самом деле мне нужно удалить только родителей с .delete класс ребенок, который был нажат (мне нужно использовать this как-то, но не знаю как)

3. Else, Я apllying этот код еще раз:
   $('.pop-up-alert').removeClass('clicked');

Дело в том, если пользователь нажимает на кнопку удаления, он получает всплывающее окно с возможностью подтвердить удаление. Если он нажмет YES, jQuery удалит родителя .delete. Если NO, всплывающее окно будет скрыто (с классом .clicked в CSS). Но если он щелкнет где-нибудь еще, всплывающее окно будет скрыто.

Если я правильно понимаю, код должен быть что-то вроде этого:

$('.delete').click(function() { 
    $('.pop-up-alert').addClass('clicked'); 
    function() { 
     if ($('.no-btn').click()) { 
      $('.pop-up-alert').removeClass('clicked'); 
     } else if ($('.yes-btn').click()) { 
      $(.delete).parent().remove(); 
     } else { 
      $('.pop-up-alert').removeClass('clicked');   
     }; 
    }; 
}); 

Но это не работает. Пожалуйста, помогите

Answer 1

Почему бы вам не упростить это? Нет необходимости в операциях if { ... } else { ... }. Просто позвольте JQuery обнаружить клик события, увидеть мою демо:

// delete function 
 
$('.delete').click(function() { 
 

 
    var parent = $(this).parent(); // get parent of delete button 
 
    $('.pop-up-alert').addClass('clicked'); // show the pop-up 
 

 
    // if user clicks no 
 
    $('.no-btn').click(function() { 
 
    $('.pop-up-alert').removeClass('clicked'); // remove pop-up 
 
    }); 
 

 
    // if user clicks yes 
 
    $('.yes-btn').click(function() { 
 
    parent.remove(); // delete parent 
 
    $('.pop-up-alert').removeClass('clicked'); // hide pop-up 
 
    }); 
 
});

.pop-up-alert { 
 
    display: none; 
 
    padding: 1em; 
 
    margin: 1em; 
 
    border: 1px solid black; 
 
} 
 
.pop-up-alert.clicked { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="pop-up-alert"> 
 
    Are you sure? <a href="#" class="no-btn">No</a>/<a href="#" class="yes-btn">Yes</a> 
 
</div> 
 

 
<div id="item1">Item 1 <a href="#" class="delete">Delete</a></div> 
 
<div id="item2">Item 2 <a href="#" class="delete">Delete</a></div>

jsFiddle demo

PS код неверен из-за этой линии: $(.delete).parent().remove();, который должен был быть: $('.delete').parent().remove();