刪除確認與彈出消息（jQuery）

Question

我有一個按鈕類.delete 當我點擊它我想運行一個jQuery代碼。
首先我想這樣做的：
$('.pop-up-alert').addClass('clicked');

然後，我需要用的if/else if/else語句statments運行的功能。

1. 如果點擊.no-btn，我想這樣做：
   $('.pop-up-alert').removeClass('clicked');

2. 不然，如果.yes-btn點擊，我想這樣做：
   $(.delete).parent().remove(); //其實我需要刪除只與父母.delete被點擊的類別孩子（我需要用某種方式使用this，但我不知道如何）

3. 否則，我又apllying驗證碼：
   $('.pop-up-alert').removeClass('clicked');

的一點是，如果用戶點擊刪除按鈕，他得到一個彈出與確認刪除的能力。如果他點擊YES，jQuery將刪除.delete父項。如果否，彈出窗口將被隱藏（在CSS中使用.clicked類）。但是如果他在其他地方點擊，反正彈出窗口將被隱藏。

如果我的理解是正確的，則代碼應該是類似的東西：

$('.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();