使用jQuery進行引導 - 使用Modal確認刪除此按鈕的父級

Question

我正在使用Bootstrap。

我有4個不同的箱子與同一類與刪除鏈接裏面。

如果我點擊刪除鏈接，它應該打開帶有消息的確認模態對話框，並且通過確認它應該刪除點擊元素的父框。

我能夠只刪除這個鏈接而不是父項。 （感謝Bootply :)）

Online Demo

HTML

<div class="container"> 
    <div class="box"><h1>Heading 1</h1><a href="#" class="confirm-delete" data-id="1">Delete</a></div> 
    <div class="box"><h1>Heading 2</h1><a href="#" class="confirm-delete" data-id="2">Delete</a></div> 
    <div class="box"><h1>Heading 3</h1><a href="#" class="confirm-delete" data-id="3">Delete</a></div> 
    <div class="box"><h1>Heading 4</h1><a href="#" class="confirm-delete" data-id="4">Delete</a></div> 
</div> 

<div id="myModal" class="modal hide"> 
    <div class="modal-header"> 
    <a href="#" data-dismiss="modal" aria-hidden="true" class="close">×</a> 
    <h3>Delete</h3> 
    </div> 
    <div class="modal-body"> 
    <p>You are about to delete.</p> 
    <p>Do you want to proceed?</p> 
    </div> 
    <div class="modal-footer"> 
    <a href="#" id="btnYes" class="btn danger">Yes</a> 
    <a href="#" data-dismiss="modal" aria-hidden="true" class="btn secondary">No</a> 
    </div> 
</div> 

jQuery的

$('#myModal').on('show', function() { 
    var id = $(this).data('id'), 
     removeBtn = $(this).find('.danger'); 
}) 

$('.confirm-delete').on('click', function(e) { 
    e.preventDefault(); 

    var id = $(this).data('id'); 
    $('#myModal').data('id', id).modal('show'); 
}); 

$('#btnYes').click(function() { 
    // handle deletion here 
    var id = $('#myModal').data('id'); 
    $('[data-id='+id+']').remove(); 
    $('#myModal').modal('hide'); 
}); 

Answer 1

所以，如果你想刪除父項，你只需要使用jQuery的.parent()函數。因此，請將您的刪除線路更改爲

$('[data-id='+id+']').parent().remove(); 

並且應該這樣做。

這裏有一個演示：http://www.bootply.com/Bz1u80HCrO

Answer 2

您可以使用jQuery's parent() function爲：

$('[data-id='+id+']').remove(); 

將是：

$('[data-id='+id+']').parent().remove(); 

Answer 3

你應該嘗試一下：

$('[data-id='+id+']').parent().remove();