Добавление того же элемента после использования remove() в jQuery

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

Вы удаляете главный клон элемент с классом .myimg, вам нужно сохранить это как резервное копирование, потому что, когда вы нажимаете на этот div, вам нужно использовать этот img для клонирования,

Вот code

Я добавил еще одно имя класса для этого клонированного элемента и удаление этих точек с таким именем класса.

Answer 2

Вы можете удалить только клоны, как так:

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

FIDDLE

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' />"); 
    }); 

fiddle проверку