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();
})

OR

不使用课程

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

注意：将其与最近的静态父容器相关联优于document本身

link详细了解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;
});

单击动态创建的链接时删除div

7 个答案: