CODEWITHSUNDEEP
jqueryhtmlappendcontainers
Johnny G.
Johnny G.

Reputation: 525

How to remove an appended image that's in a different div container using jQuery?

I have an image gallery where I'd like for users to click on an image and append a small thumbnail of it below in a separate div container.

Now when the user clicks on the same large image, I'd like to remove its corresponding small thumbnail and decrease the counter of "images selected"- in a toggleable fashion.

Currently, my code allows for users to click on the larger image from the gallery and append a small thumbnail on a separate container #thumbnail_display while increasing the counter value to reflect amount of images selected.

My trouble is when I try to remove the thumbnail from the thumbnail gallery. How do I retrieve the same thumbnail image by clicking on the larger image a second time? I'm only retrieving the first image and not the image that was clicked upon.

Here's a codepen of what I have so far. Appreciate your help!

Here's the code: 

$(document).ready(function() {
 //DOM: image counter id
  var $imageCounter = $("#image_counter");
  var media_file_counter = 0;

  //DOM: gallery wrapper
  var $thumbnailDisplayBox = $("#thumbnail_display");

  var $media_files = $(".thumbnail_overlay_container").find("img");

  //call function that shows "0 items selected" if there are no thumbnails in gallery

  display_zero_items($thumbnailDisplayBox, $imageCounter);

  $(".thumbnail_overlay_container").click(function() {
      var img_source = $(this).children("img").attr("src");

      // this variable stores the button element that will have 
      toggleable classes for the checkmark

       var $media_file_button = $(this).find("button");

       var $thumbnail_unit_container = 
       $('<divclass="expert_media_container"></div>');

       var $appended_thumbnail_unit_container = 
       $(".expert_media_container");

       var $thumbnailMedia = $('<img src="' + img_source + 
       '"/>').addClass("thumbnail_frame");

       // increase the counter
       toggle_media($media_file_button, "hidden");

       function toggle_media(element, className) {
         if (element.hasClass(className)) {
          element.removeClass(className);
          increase_counter();
          appendImage(img_source);
         } else {
          element.addClass(className);
          decrease_counter();
          removeImage($appended_thumbnail_unit_container);
        }
      }

      function appendImage(imgSrc) {
        console.log("append image called- the image source", imgSrc);
        $thumbnail_unit_container.append($thumbnailMedia);
        $thumbnailDisplayBox.append($thumbnail_unit_container);
      }

      function removeImage(thumbnail_gallery_container) {
        //if imgSource === imgSource of the thumbnail
       // if(img_source === thumbnail.find('img').attr('src')){
       //   thumbnail.remove();
      // }
      console.log(
       "removed image",
       thumbnail_gallery_container.find("img").attr("src")
      );
     //remove the thumbnail
     // console.log($thumbnail_unit_container.find('img'));
    }
  });

    //return index position of the media file

  function display_zero_items(element, target) {
    if (element.children().length === 0) {
     target.text("0");
    }
 }
 function media_file_index_pos(parent, element) {
   return parent.index(element);
 }

 var increase_counter = function() {
   media_file_counter++;
   $imageCounter.html(media_file_counter);
 };

  var decrease_counter = function() {
   media_file_counter--;
   $imageCounter.html(media_file_counter);
  };
 });

Upvotes: 0

Views: 173

Answers (2)

ewwink
ewwink

Reputation: 19154

if the image always has id you don't need .index() or closest(), just remove() it by id

$(".thumbnail_overlay_container").click(function() {
     ...
    var img_id = $(this).children("img").attr("id");
    ...
    //append "thumb_" to exiting id
    var $thumbnailMedia = $('<img src="' + img_source + '" id="thumb_' + img_id + '" class="thumbnail_frame" />')
    );

   function removeImage(thumbnail_gallery_container) {
     $('#thumb_' + img_id).parent().remove();
   ...
   }

Upvotes: 0

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

Using the .index() of its container, the closest() class thumb, you are sure to target the right thumbnail if you add this information to it as an id.

Here is the relevant part of your code:

var imgContainer = $(this).closest(".thumb").index();         // ADDED
console.log("Container index: "+imgContainer);                // ADDED

var $thumbnailMedia = $('<img id="thumb_'+imgContainer+'" src="' + img_source + '"/>').addClass(    // MODIFIED
  "thumbnail_frame"
);
//Store the index position of each media file
var media_index = media_file_index_pos(
  $(".thumbnail_overlay_container"),
  this
);

// increase the counter
toggle_media($media_file_button, "hidden", imgContainer);   // MODIFIED

function toggle_media(element, className, imgContainer) {   // MODIFIED
  if (element.hasClass(className)) {
    element.removeClass(className);
    increase_counter();
    appendImage(img_source);
  } else {
    element.addClass(className);
    decrease_counter();
    removeImage($appended_thumbnail_unit_container);
    console.log("#thumb_"+imgContainer);                    // ADDED
    $(document).find("#thumb_"+imgContainer).remove();      // ADDED
  }
}

CodePen

Upvotes: 2

Related Questions