div가 기능을 트리거 한 div를 기반으로 모달 확인에서 여러 Div를 삭제합니다.

Question

나는 여러 Div가 나타나며 각 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

저는 .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

하는 당신은 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 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> 

deleteDiv``와 같은 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>