在jQuery中使用remove（）之后添加相同的元素

Question

我正在使用此代码在水龙头上的一个潜水区中添加点。 现在我想删除旧的攻丝点来更新它，我正在使用jQuery remove()函数。 它工作正常，但是之后没有显示该div上的下一个要点。

jQuery(document).ready(function () {
    $("#test").click(function (e) {
        $(".myimg").first().clone().offset({
            left: e.pageX,
            top: e.pageY
        }).appendTo('body');
    });
    $('.remove').click(function(){
        $('.myimg').remove();
    });
})

http://jsfiddle.net/szCAL/9/

Answer 1

您可以仅删除克隆，如下所示：

jQuery(document).ready(function () {
    var el = $('.myimg').first();
    $("#test").click(function (e) {
        el.clone().offset({
            left: e.pageX,
            top: e.pageY
        }).appendTo('body').addClass("clone");
    });
    $('.remove').click(function(){
        $('.clone').remove();
    });
})

http://jsfiddle.net/szCAL/13/

Answer 2

您将使用类.myimg删除主要的clone元素，需要将其保存为备份，因为单击该div时，需要使用该img进行克隆，

这是代码

我在克隆的元素中添加了另一个类名，并使用该类名删除了这些点。

Answer 3

如果您创建一个新元素而不是克隆，那么问题会自行解决，您可以摆脱第一个令人讨厌的元素：

jQuery(document).ready(function () {
    $("#test").click(function (e) {
        $('<img />', {
            style   : 'left: '+e.pageX+'px;top:'+ e.pageY + 'px;height: 10px;width:10px',
            src     : 'http://www.nystce.nesinc.com/images/tests_circle.gif',
            'class' : 'myimg'
        }).appendTo('body');
    });
    $('.remove').click(function(){
        $('.myimg').remove();
    });
});

小提琴

Answer 4

您需要再次添加元素才能开始显示位置

$('.remove').click(function(){
        $('.myimg').remove();
        $('#test').append("<img class='myimg' width='10' src='http://www.nystce.nesinc.com/images/tests_circle.gif' height='10' />");
    });

结帐小提琴