删除并确认删除Div

Question

I am not good at JavaScript and jQuery. I want to remove a div after clicking on a .close anchor link but I want a confirmation dialog box to appear before removing the div .

Secondly, it's removing all the div when .close anchor link is clicked but I want to close only the div that is clicked not all others along with confirmation dialog box to remove it or not.

Here is my code:

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

Try this,

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

Please edit the confirmation dialog message according to your need.

Answer 2

Try the DEMO Click here

First remove the Duplicate code in your script tag and use the following code for you solution

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

All you need is:

confirm()

For instance:

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