Question

Basically, what I want to do is when a list item is clicked, an image is appended to the images div, and when it is toggled off, to remove the last image from the images div. So the more list item’s are added, the more images are in the div. When the list items are all toggled off, the number of images should be reset back to normal.

HTML

<ul id="list">
  <li><a href="#">First</a></li>
  <li><a href="#">Second</a></li>
  <li><a href="#">Third</a></li>
</ul>

<div class="images">
  <img src="#" />
  <img src="#" />
  <img src="#" />
  <img src="#" />
  <img src="#" />
</div>

jQuery

var count = 0;
$('#list a').on("click", function(event){
    count++;
    $(this).parent().toggleClass('added');
    var classname = $(this).parent().toggleClass('added');

    if (classname == '') {
      // remove image
    } else {
      //add image
    }

}

any ideas?

Answer 1

Why not just loop through the image list to see if the source exists and leave classes out of it? Something like this maybe?:

$('#list a').on("click", function(event){

    var src = $(this).attr('href'); // source of link clicked

    var addMe = 1;

    // loop through images list and look for clicked source
    $('.images img').each(function(i) {
        var $img = $(this);

        if ($img.attr('src') = src) { // found source matching <a href>
            $img.remove(); // remove the image
            addMe = 0; // stop image from adding
        } 
    });

    // if addme still = 1 append the html
    if (addMe) {
        var html = '<img src="'+src+'" />';
        $('.images').append(html);
    }

});