CODEWITHSUNDEEP
jqueryhtmlconfirmation
Hovhannes Sargsyan
Hovhannes Sargsyan

Reputation: 1083

How setup a sample custom confirm dialog (modal)

I have this code

<div class="line"><a href="" class="del">x</a></div>
<div class="line"><a href="" class="del">x</a></div>
<div class="line"><a href="" class="del">x</a></div>
<div class="line"><a href="" class="del">x</a></div>
<div class="line"><a href="" class="del">x</a></div>
<div class="line"><a href="" class="del">x</a></div>
<div class="line"><a href="" class="del">x</a></div>
<div class="line"><a href="" class="del">x</a></div>
<div class="line"><a href="" class="del">x</a></div>
<div class="line"><a href="" class="del">x</a></div>

I need delete every .line after click on .del, then after that on yes in modal-box, which is shown after I clicked on .del

here is my code in JSFiddle

but if I click then close the modal-box, then again click on .line, after I click on yes on pseudo confirm dialog, it is removing also the previusly clicked .line.

I know that there are plugins for custom confirmation dialogs, but I need a sample code the accomplish this.

and so, how can I detect only the last clicked .line, and delete only that?

UPD

the pseudo modal will be shown it right corner, after click on "X" - if anyone did not noticed

UPD 2 with animation gif

so click on the first .line, the modal is showed, I click on close-modal, then I click the last .line, again modal -is showed, in this time I click yes, I want to delete the last .line, but instead - the first and the last .line divs are removing

animated screenshot

Upvotes: 0

Views: 77

Answers (1)

themerlinproject
themerlinproject

Reputation: 3582

This will work (new jsfiddle):

var item;

$('.del').click(function(e){
    e.preventDefault();
    item = $(this).closest('.line');
    $('.modal').show();
});

$('.yes').click(function(e){
    e.preventDefault();
    item.fadeOut();
});

$('.close-modal').click(function(e){
    e.preventDefault();
    $('.modal').hide();
});

Upvotes: 1

Related Questions