Как настроить пример пользовательского диалогового окна подтверждения (модального)

у меня есть этот код

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

Мне нужно удалить каждую .line после нажатия на .del, а затем на да в модальном окне, которое отображается после того, как я нажал на .del

вот мой код в JSFiddle

но если я нажму, а затем закрою модальное окно, затем снова нажму на .line, после того, как я нажму «да» в диалоговом окне псевдоподтверждения, он также удалит ранее нажатую .line.

Я знаю, что есть плагины для настраиваемых диалогов подтверждения, но мне нужен пример кода для этого.

и так, как я могу обнаружить только последнюю щелкнутую строку .line и удалить только ее?

УПД

псевдомодал покажет правый угол, после нажатия на "Х" - если кто не заметил

UPD 2 с анимацией gif

поэтому нажимаю на первую .line, отображается модальное окно, я нажимаю на close-modal, затем нажимаю на последнее .line, снова показывается модальное, в это время я нажимаю «да», я хочу удалить последнюю .line, но вместо этого удаляются первый и последний разделы .line

анимированный скриншот


html jquery confirmation
person Hovhannes Sargsyan    schedule 22.04.2014    source источник
comment
Вы спрашиваете, как удалить div.line, который обертывает a.del, по которому щелкнули? Извините, я смущен тем, что вы пытаетесь выполнить.   -  person themerlinproject    schedule 23.04.2014
comment
Вроде все работает   -  person    schedule 23.04.2014
comment
обновленный вопрос с анимированным скриншотом   -  person Hovhannes Sargsyan    schedule 23.04.2014
comment
Я вижу, что вы пытаетесь исправить сейчас. Я обновил свой ответ рабочим jsfiddle и кодом. К вашему сведению, это плохая практика помещать функции кликов внутри функций кликов.   -  person themerlinproject    schedule 23.04.2014

Ответы (1)


arrow_upward
1
arrow_downward

Это будет работать (новый 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();
});
person themerlinproject    schedule 22.04.2014
comment
спасибо, это работает, но я не могу понять, почему мой не работал... что я делал не так? - person Hovhannes Sargsyan; 23.04.2014
comment
если честно, я не уверен, как у вас все работало так хорошо, как раньше. Использование .each() просто перебирает каждый соответствующий элемент, и вы каждый раз назначали «элемент» - еще до того, как произошел щелчок. Также плохая практика иметь операторы кликов внутри операторов кликов. Лучше обрабатывать каждый элемент отдельно. - person themerlinproject; 23.04.2014