Question

我有这个：

<div id="pic_wrapper">
    <div id="selected_picture">
        <img src="map.png" />
    </div>
</div>

并将标记div添加到pic_wrapper（请参阅Fiddle FYI：https://jsfiddle.net/linuxoid/9w4y2cyp/）

我通过双击实现了标记的删除：

pic_wrapper.on('click', '.pin', function(e){
  var $this = $(this);
  if ($this.hasClass('clicked')){
    // Double click
    $this.removeClass('clicked'); 
    $this.remove();
  }
  else{
    $this.addClass('clicked');
    setTimeout(function(){ 
      if ($this.hasClass('clicked')){
        // Single click
        $this.removeClass('clicked'); 
                /// do single click stuff
      }
    }, 500);
  }
});

所以它确实删除了双击的所有引脚。我可以在控制台中看到div'.pin'确实被删除了。但是当我通过所有剩余的引脚并通过隐藏的输入值保存它们的位置时，保存的数据实际上也包含所有被移除的引脚：

$('#ccm-form-submit-button').on('click', function(e){
    var dataObject = [];
    var data_left, data_top;

    $.each($('.pin'), function(index, element){
        data_left = $(element).position().left;
        data_top = $(element).position().top;
        dataObject.push({
            data_left: data_left,
            data_top: data_top
        });
    });

    var dataObjectString = JSON.stringify(dataObject);
    $('#data').val(dataObjectString);
});

为什么不删除remove（）？

Answer 1

使用此语法可确保.pin方法中使用的.each()在单击按钮时#pic_wrapper内的实际：

$('#pic_wrapper').find('.pin').each(function(index,element){

而不是

$.each($('.pin'),function(index,element){

jquery remove（）从视图中删除元素，但不从页面中删除元素

1 个答案: