删除并确认删除Div

Question

我不擅长JavaScript和jQuery。 我想在单击.close锚链接后删除div ，但希望在删除div之前出现一个确认对话框。

其次，当单击.close锚链接时，它将删除所有div ，但我只想关闭单击的div ，而不关闭所有其他div以及确认对话框以将其删除。

这是我的代码：

 $(document).ready(function(){ $(".close").click(function(){ $(".default-address").remove(); }); }); $(document).ready(function(){ $(".close").click(function(){ $(".other-address").remove(); }); }); 

 .default-address { float:left; margin:10px; color:#fff; width: 46%; box-shadow:1px 2px 14px 0px rgba(61, 68, 30, 0.41); -webkit-box-shadow:1px 2px 14px 0px rgba(61, 68, 30, 0.41); -moz-box-shadow:1px 2px 14px 0px rgba(61, 68, 30, 0.41); background-color: #c2d91f; font-family: Arial, Helvetica, sans-serif; font-size: 14px; } .default-address ul, .default-address li { color: #717f1a; list-style: none outside none; margin: 0; padding: 4px; } .default-address ul li span { float: right; padding-right: 10px; } .default-address ul li:nth-child(n+1) { background-color: #f0f4d7; } .default-address ul li:nth-child(2n+1) { background-color: #f9fce3; } .address-head { margin:10px; } a.close { height:20px; width:20px; float:right; color:#fff; background-color:#a1b41b; text-align: center; text-decoration:none; } a.close:hover { background-color:#879717; } .other-address { background-color: #c2d91f; color: #fff; float: left; font-family: Arial,Helvetica,sans-serif; font-size: 14px; margin: 10px; width: 46%; } .other-address ul { color: #717f1a; list-style: none outside none; margin: 0 0 1px; padding: 0; } .other-address li { padding: 5px; } .other-address ul li span { float: right; padding-right: 10px; } .other-address ul li:nth-child(n+1) { background-color: #f0f4d7; } .other-address ul li:nth-child(2n+1) { background-color: #f9fce3; } @media (max-width:768px){ .default-address, .other-address { width:96%; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="default-address"> <div class="address-head"> <strong>1. Address </strong> <a class="close" href="#">X</a> </div> <ul> <li><strong>First Name:</strong><span>First Name Here</span></li> <li><strong>Last Name:</strong><span>Last Name Here</span></li> <li><strong>Address:</strong><span>User Address</span></li> <li><strong>City:</strong><span>User City Name</span></li> <li><strong>Area:</strong><span>User Area Detail</span></li> </ul> </div> <div class="other-address"> <div class="address-head"> <strong>1. Address </strong> <a class="close" href="#">X</a> </div> <ul> <li><strong>First Name:</strong><span>First Name Here</span></li> <li><strong>Last Name:</strong><span>Last Name Here</span></li> <li><strong>Address:</strong><span>User Address</span></li> <li><strong>City:</strong><span>User City Name</span></li> <li><strong>Area:</strong><span>User Area Detail</span></li> </ul> </div> <div class="other-address"> <div class="address-head"> <strong>1. Address </strong> <a class="close" href="#">X</a> </div> <ul> <li><strong>First Name:</strong><span>First Name Here</span></li> <li><strong>Last Name:</strong><span>Last Name Here</span></li> <li><strong>Address:</strong><span>User Address</span></li> <li><strong>City:</strong><span>User City Name</span></li> <li><strong>Area:</strong><span>User Area Detail</span></li> </ul> </div> <div class="other-address"> <div class="address-head"> <strong>1. Address </strong> <a class="close" href="#">X</a> </div> <ul> <li><strong>First Name:</strong><span>First Name Here</span></li> <li><strong>Last Name:</strong><span>Last Name Here</span></li> <li><strong>Address:</strong><span>User Address</span></li> <li><strong>City:</strong><span>User City Name</span></li> <li><strong>Area:</strong><span>User Area Detail</span></li> </ul> </div> <div class="other-address"> <div class="address-head"> <strong>1. Address </strong> <a class="close" href="#">X</a> </div> <ul> <li><strong>First Name:</strong><span>First Name Here</span></li> <li><strong>Last Name:</strong><span>Last Name Here</span></li> <li><strong>Address:</strong><span>User Address</span></li> <li><strong>City:</strong><span>User City Name</span></li> <li><strong>Area:</strong><span>User Area Detail</span></li> </ul> </div> <div class="other-address"> <div class="address-head"> <strong>1. Address </strong> <a class="close" href="#">X</a> </div> <ul> <li><strong>First Name:</strong><span>First Name Here</span></li> <li><strong>Last Name:</strong><span>Last Name Here</span></li> <li><strong>Address:</strong><span>User Address</span></li> <li><strong>City:</strong><span>User City Name</span></li> <li><strong>Area:</strong><span>User Area Detail</span></li> </ul> </div> 

Answer 1

尝试这个，

$(".close").click(function(){
    var confirmVal = confirm("Do you really want to remove the default address part?");

    if(confirmVal) {
        $(this).closest("div").parent().remove();
    } else {
        // cancel button clicked
    }
});

现场演示

请根据需要编辑确认对话框消息。

Answer 2

尝试演示点击这里

首先，删除脚本标签中的重复代码，然后使用以下代码为您解决

  $(document).ready(function () {
        $(".close").click(function () {
            var $conf = confirm("Do you really want to remove this data?")
            if($conf)
                $(this).closest("div").parent().remove();
        });
    });

Answer 3

所有你需要的是：

确认（）

例如：

if (window.confirm("Do you really want to leave?")) { 
  //your code
}