Ask for confirmation in the same div by swapping its contents?

Question

I have the following html:

<div class="modify">
    <a href="#" class="change" id="1">Change</a><br>
    <a href="#" class="delete" id="1">Delete</a>
</div>

And an according jQuery:

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

    var parent_element = $(this).closest('li');
    var url_string = $(this).attr('id') + '/delete/';

    $.ajax({
        type: 'POST',
        url: url_string,
        success: function(response) {
        parent_element.fadeOut(600, function() {
                parent_element.remove();
            });
        }
    });
});

Now I want to ask the user for confirmation within .modify. The current contents .change and .delete should disappear and be swapped for something like:

Are you sure?

Yes No

This is how it would look in general:

If the user presses Delete the contents should change like this:

As you might have figured, if the user chooses

• Yes, the parent_element should be deleted
• No, .modify should return back its original state

What would be the idiomatic way to do this?

Answer 1

I modified my answer after your additional note.

codepen live example

What about..

HTML

<div class="modify askState">
  <div class="ask">
    <a href="#" class="change" id="1">Change</a><br>
    <a href="#" class="delete" id="1">Delete</a>
  </div>
  <div class="confirm">
    <span class="confirmDeleteText">Are you sure?</span><br/>
    <a href="#" class="confirm confirmYes">Yes</a>
    <a href="#" class="confirm confirmNo">No</a>
  </div>
</div>

JS

var askState = true, modifyElement = $(".modify");

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

  askConfirmation();    
});

function askConfirmation() {
  toggleState();
}

$(".confirmYes").click(function() {
  var parent_element = $(this).closest('li');
    var url_string = $(this).attr('id') + '/delete/';

    $.ajax({
        type: 'POST',
        url: url_string,
        success: function(response) {
        parent_element.fadeOut(600, function() {
                parent_element.remove();
            });
        }
    });
});


$(".confirmNo").click(function() {
  toggleState();
});

function toggleState() {
  if( askState ) {
    modifyElement.  addClass("confirmState").removeClass("askState");
  } else {
    modifyElement.removeClass("confirmState").  addClass("askState");
  }
  askState = !askState;
}

CSS

.confirmState .ask {
  display: none;
}

.askState .confirm {
 display: none;
}

I added HTML so that the original text wont get lost (if you do innerHTML=newText then you cannot restore its innerHTML properly without backing up).

Please also note that its fairly readable:

1. IF I click "delete", then ASK confirmation (semantic code).
2. IF I ask confirmation, then CHANGE State (functional code, could have been nice to make toConfirmState() in stead of toggleState()).
3. (then in new state)
   IF I click "confirmYes", then DO perform code (functional code, could have been nice to make a delete function (semantic code))

Answer 2

$(".delete").click(function(){    
var ans = confirm("Are You Sure To Delete This Record...");

if(ans)
  {return true;}
else
  {return false;}

... ur code so on
}