confirm()

Question

我不擅长JavaScript和jQuery。我想在点击div锚链接后删除.close，但我想在删除div之前显示确认对话框。

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

这是我的代码：

＆＃13;

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

＆＃13;

.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%;
  }
}

＆＃13;

<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>

＆＃13;

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

FIDDLE DEMO

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

Answer 2

试试DEMO Click here

首先删除脚本标记中的重复代码，并使用以下代码为您提供解决方案

  $(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

您只需要：

confirm()

例如：

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

点击确认后删除Div

3 个答案:

confirm()