我如何使我的删除链接拆分为是/否时单击 - how can i make my delete link split into a yes/no when clicked?

how can i make my delete link split into a yes/no when clicked?

我有一个充满数据的表，在行末尾我有一个删除选项。

与其链接到一个全新的页面来确认删除，不如将delete链接分割成一个yes/no链接，根据点击的是哪个，这个链接要么删除该行，要么变回delete，这样会更简洁。我知道reddit.com在他们的评论区有一个很好的例子。

我试着寻找这个问题的答案，但我甚至不知道该怎么称呼它，也不知道该用什么来完成它。

帮助reddit的朋友总是很有趣的!

你可以做一些类似于警告的事情，当元素被点击时，它会发出警告并询问用户是否需要确认。

if(confirm("Sure you want to delete this update? There is NO undo!"))

还是……

Reddit有当你点击删除一个隐藏的元素会出现所以

$('.delete_button').click(function(){
   $('.delete_option').show();
   $('.delete_button').hide();
});

如果你在更新数据库方面需要更多的帮助或需要更多的解释，请告诉我。

下面是注释

中jsfiddle的代码HTML

<div id="delete">
  <a href="#" id="delete_btn">delete</a>
  <div class="option">
      <span>are you sure?</span>
       <a href=""> yes </a><span>/</span><a href=""> no</a>
   </div>
</div>

CSS

a { 
text-decoration: none; 
color: #888;
font-weight: bold;
font: normal x-small verdana, arial, helvetica, sans-serif;   
}  
.option {
display: none;
color: #888;
font-weight: bold;
padding: 0 1px;
font: normal x-small verdana, arial, helvetica, sans-serif;
}
.option span
{
color: red;
}

JQUERY

$('#delete_btn').click(function(){
    $(this).hide();
    $(this).next('.option').show();
});

带有如下标记:

<a id="deleteLink" href="#">Delete</a>
<span id="areYouSure" style="display: none;"><a id="confirmDelete" href="urlToDeleteResource">Yes</a><a id="cancelDelete" href="#">Yes</a></span>

你可以这样做:

$('#deleteLink').click(function(e) {
  e.preventDefault();
  $(this).hide();
  $('#areYouSure').show();
}); 
$('#cancelDelete').click(function(e) {
  e.preventDefault();
  $('#deleteLink').show();
  $('#areYouSure').hide();
}); 
$('#confirmDelete').click(function(e) {
  e.preventDefault();
  $(this).closest('tr').remove();
});

您可以使用jquery在单击Delete链接时显示yes no链接。然后单击"是"将执行删除操作，单击"否"将再次用"删除"选项替换这两项。

下面是一个jquery显示/隐藏参考:http://papermashup.com/simple-jquery-showhide-div/

就像这样使用纯javascript

<a href="?somelink" onClick="return confirm('Are You Sure Wanna Delete This One?')">Delete</a>

假设删除按钮位于一行中的单元格中:

$('.delete').click(function(){
     var delete_it = confirm('DELTE THIS ROW?');
     if(delete_it){
         $(this).parents('tr').remove();
     }
});

演示:http://jsfiddle.net/maniator/U33BD/