删除确认与弹出消息（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();