How setup a sample custom confirm dialog (modal)

Question

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

Answer 1

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