單擊動態創建的鏈接時，刪除div

Question

我有以下代碼，當單擊復選框時，它將創建一個包含一些信息的div。 但是，在該div中，我添加了一個錨標記來刪除div本身。

但是，我不確定如何在鏈接單擊上刪除div，因為div是動態生成的。

//Add selected job in the results div
function AddSelectedJob(id, display) {
    //create a div for every selected job
    $("[id$=ResultsDiv]").append('<div class="selectedjobs" id=' + id + '>' + display + '<a href="#">Remove selected job</a></div>');
}

Answer 1

$(document).on('click','.selectedjobs a',function(){
       $(this).parent().remove();
});

Answer 2

給您的div一個類並on委托事件上使用

嘗試這個

$("[id$=ResultsDiv]").append('<div class="selectedjobs" id=' + id + '>' + display + '<a href="#" class="removeJob">Remove selected job</a></div>');

$('[id$=ResultsDiv]').on('click','.removeJob',function(){
    $(this).parent().remove();
})

要么

不上課

$('[id$=ResultsDiv]').on('click','.selectedjobs a',function(){
    $(this).parent().remove();
})

注意：將其分配到最近的靜態父容器比document本身更好

鏈接以了解on事件的更多信息

Answer 3

使用此代碼：

//在結果div中添加選定的作業

function AddSelectedJob(id, display) {
    //create a div for every selected job
    $("[id$=ResultsDiv]").append('<div class="selectedjobs" id=' + id + '>' + display + '<a href="javascript:;" onclick="removeSelectedJob(this)">Remove selected job</a></div>');
}

function removeSelectedJob(el){
    $(el).parent().remove();
}

Answer 4

就像是：

$("#ResultsDiv>div.selectedjobs a").click(function(){
    $(this).parent().remove();
});

Answer 5

嘗試現場點擊...

$(".selectedjobs a").live("click", function(){
    $(this).parent().remove();
});

Answer 6

在這種情況下，通常不會創建div，而是將其隱藏起來，而這會帶來很多麻煩。 您可以創建一個具有“ display：none;”的div。 在CSS中，然后選中復選框后，您可以使用

$("[id$=ResultsDiv]").show();

如果未選中，

$("[id$=ResultsDiv]").hide();

Answer 7

在這種情況下，我更喜歡使用.parents（）。

並盡可能將一個類添加到錨，然后返回false或使用.preventDefault（）來阻止錨的默認操作。

//Add selected job in the results div
function AddSelectedJob(id, display) {
    //create a div for every selected job
    $("[id$=ResultsDiv]").append('<div class="selectedjobs" id=' + id + '>' + display + '<a class="removeSelectedJobs" href="#">Remove selected job</a></div>');
}

$('.selectedjobs .removeSelectedJobs').live('click', function() {
    $(this).parents('.selectedjobs').remove();
    return false;
});