[Solved] Why are images duplicated with append()?

by


From the source code on your website, it seems that you might be attempting to remove images from the container before appending new images:

$('#project_images').html('');

However, that selector uses an underscore while the actual element uses a hyphen:

<div id="project-images">

Also, you are clearing the contents after appending images rather than before.
I suggest using jQuery’s empty() on the container before appending new images:

$(function() {

  var projects = {

    'project_1': {
      'images': [
        'http://lorempixel.com/400/30/abstract/1/',
        'http://lorempixel.com/400/30/abstract/2/'
      ]
    },
    'project_2': {
      'images': [
        'http://lorempixel.com/400/30/abstract/3/',
        'http://lorempixel.com/400/30/abstract/4/'
      ]
    },
    'project_3': {
      'images': [
        'http://lorempixel.com/400/30/abstract/5/',
        'http://lorempixel.com/400/30/abstract/6/'
      ]
    }

  }

  var projectData = projects["project_1"];

  jQuery('button').on('click', function() {
    
    var id=jQuery(this).data('id'),
        projectData=projects["project_"+id];

    $('#project-images').empty();
    
    $.each(projectData.images, function(item) {
      $('#project-images').append('<span class="image_holder" style="background-image:url(' + projectData.images[item] + ');"></span>')
    });

  });

});
.image_holder {
  display: block;
  height: 30px;
  background-size: cover;
  margin: 0 0 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button data-id="1">LOAD #1</button>
<button data-id="2">LOAD #2</button>
<button data-id="3">LOAD #3</button>

<div id="project-images"></div>

An alternate method is to concatenate a string of new images, and then set the HTML of the container without using append():

$(function() {

  var projects = {

    'project_1': {
      'images': [
        'http://lorempixel.com/400/30/abstract/1/',
        'http://lorempixel.com/400/30/abstract/2/'
      ]
    },
    'project_2': {
      'images': [
        'http://lorempixel.com/400/30/abstract/3/',
        'http://lorempixel.com/400/30/abstract/4/'
      ]
    },
    'project_3': {
      'images': [
        'http://lorempixel.com/400/30/abstract/5/',
        'http://lorempixel.com/400/30/abstract/6/'
      ]
    }

  }

  var projectData = projects["project_1"];

  jQuery('button').on('click', function() {
    
    var id=jQuery(this).data('id'),
        projectData=projects["project_"+id],
        html_string='';
    
    $.each(projectData.images, function(item) {
      html_string+='<span class="image_holder" style="background-image:url(' + projectData.images[item] + ');"></span>';
    });
    
    $('#project-images').html(html_string);

  });

});
.image_holder {
  display: block;
  height: 30px;
  background-size: cover;
  margin: 0 0 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button data-id="1">LOAD #1</button>
<button data-id="2">LOAD #2</button>
<button data-id="3">LOAD #3</button>

<div id="project-images"></div>

2

solved Why are images duplicated with append()?