Удалить несколько Div из модального подтверждения, в зависимости от того, какой div вызвал функцию

Question

У меня появилось несколько Div, и я бы хотел, чтобы у каждого была кнопка «Удалить». Когда пользователь нажимает на удаление, у меня есть модальный вариант с двумя вариантами: подтвердить удаление или отменить.

ВОПРОС: Как я могу адаптировать мой код ниже, чтобы удалить только родительский div, который я выбрал для запуска модального get? Массив?

Вот что я собрал на данный момент:

 <div class="DivToBeDeleted">
        stuff Here <div id="deleteDiv">delete IMG</div>
    </div>

    <div class="DivToBeDeleted">
        stuff Here <div id="deleteDiv">delete IMG</div>
    </div>

//The Modal Content

<div id="dialogpop">
<div id="deleteCancel">image</div>
<div id="deleteConfirm">image</div> 
</div>    

        $(function() {
                    $.fx.speeds._default = 400;

            $("#dialogpop").dialog({
                resizable: false,
                height:260,
                modal: 'true',
                show: 'drop',
                hide: 'drop',
                autoOpen: false
                });
                $("#deleteDiv").click(function() {
                $('#dialogpop').dialog('open');
                });

                $('#deleteConfirm').click (function() {
                $('#deleteDiv').parents(".DivToBeDeleted").animate({ opacity: 'hide' }, "slow");

                        $('#dialogpop').dialog('close');    
                    });
                    $('#deleteCancel').click (function() {
                        $('#dialogpop').dialog('close');

        });
            });

Answer 1

Я не слишком знаком с .dialog(), но здесь я поместил временный класс на тот, который был нажат, с именем pendingDelete.

Затем я просто удалил один с этим классом или удалил класс, если удаление было отменено.

** Попробуйте: ** http://jsfiddle.net/XVGxZ/

HTML

<div class="DivToBeDeleted">
    stuff Here <div class="deleteDiv">delete IMG</div>
</div>

<div class="DivToBeDeleted">
    stuff Here <div class="deleteDiv">delete IMG</div>
</div>

//The Modal Content

<div id="dialogpop">
    <div id="deleteCancel">cancel</div>
    <div id="deleteConfirm">confirm</div> 
</div>  ​

JQuery

$.fx.speeds._default = 400;

$("#dialogpop").dialog({
    resizable: false,
    height:260,
    modal: 'true',
    show: 'drop',
    hide: 'drop',
    autoOpen: false
});

$(".deleteDiv").click(function() {
    $(this).addClass('pendingDelete');
    $('#dialogpop').dialog('open');
});

$('#deleteConfirm').click (function() {
    $('.pendingDelete').parents(".DivToBeDeleted").animate({ opacity: 'hide' }, "slow");
    $('#dialogpop').dialog('close');    
});
$('#deleteCancel').click (function() {
    $('.pendingDelete').removeClass('pendingDelete');
    $('#dialogpop').dialog('close');

});​

Answer 2

Этот пример удалит правильный DIV из DOM:

JQuery

<script type="text/javascript">
  $(document).ready(function(){
    $(".deleteDiv").click(function() {

      var DivToDelete=$(this).parent();

      $.fx.speeds._default = 400;

      $("#dialogpop").dialog({
        resizable: false,
        height:260,
        modal: 'true',
        buttons: { "Delete": function() { 
                     $(DivToDelete).remove();
                     $(this).dialog("close"); 
                   },
                   "Cancel": function() { $(this).dialog("close"); }}
      });
    });
  });
</script>

HTML

<div class="DivToBeDeleted">
  First! <div class="deleteDiv">First Delete Button</div>
</div>

<div class="DivToBeDeleted">
  Second! <div class="deleteDiv">Second Delete Button</div>
</div>

<div id="dialogpop"></div>

Answer 3

Вы должны указать расположение кнопок в домене, например

.

<div class="dialog">
   <div>
      <button class="close">Close</button>
   </div>
</div>

$('.dialog .close').click(function() {
    var $button = $(this); // now we have a reference to the button
    $button.parents('.dialog').dialog('close'); //find the dialog div up the DOM tree and close it
});

Таким образом, вам нужно использовать this, чтобы получить текущий элемент и получить родительский диалог .