Question

我有几个Div出现，并希望每个人都有一个“删除”按钮。当用户点击删除时，我有一个模态出现2个选项，要么确认删除，要么取消。

问题是：我如何调整下面的代码，以便只有我选择触发模态的父div才会被删除？数组？

到目前为止，这是我拼凑的内容：

 <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

您必须使用dom中的按钮位置，例如

<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来获取当前项目并获取其父对话框。

Answer 2

我对.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 3

此示例将从DOM中删除正确的DIV：

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

根据触发该功能的div，从模态确认中删除多个Div

3 个答案: