Question

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

如果删除链接拆分为是/否链接，而不是链接到整个新页面以确认删除，则删除该行或根据单击更改为“删除”将更改为删除。我知道reddit.com在他们的评论部分有一个很好的例子。

我试着寻找答案，但我甚至不知道该怎么称呼或者用它来完成它。

Answer 1

总是乐于帮助一个红色的同伴！

您可以执行类似警报的操作，因此当单击该元素时，它会发出警报并询问用户是否要确认。

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();

});

Answer 2

使用标记：

<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();
});

Answer 3

单击“删除”链接时，可以使用jquery显示“是”链接。然后单击是将执行删除操作，然后单击否只会再次使用删除选项替换这两个项目。

这是一个jquery显示/隐藏引用： http://papermashup.com/simple-jquery-showhide-div/

Answer 4

使用纯javascript时就像这样

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

Answer 5

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

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

     var delete_it = confirm('DELTE THIS ROW?');

     if(delete_it){
         $(this).parents('tr').remove();
     }

});

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

如何在点击时将删除链接拆分为是/否？

5 个答案: