CODEWITHSUNDEEP
jquery
linuxoid
linuxoid

Reputation: 1447

jquery remove() removes element from view but not from page

I have this:

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

and append marker divs to the pic_wrapper (see Fiddle FYI: https://jsfiddle.net/linuxoid/9w4y2cyp/)

I implemented removal of the markers by double clicking:

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

So it does remove all pins which are double clicked. I can see in the console the divs '.pin' are indeed removed. But when I go through all the remaining pins and save their positions through a hidden input value, the saved data actually contains all removed pins too:

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

Why are they not removed by the remove()?

Upvotes: 0

Views: 51

Answers (1)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33943

Use this syntax to ensure the .pin used in the .each() method are the ones actually inside the #pic_wrapper when the button is clicked:

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

instead of

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

Upvotes: 1

Related Questions