Removing an added image again

Question

I'm trying to add the full size image when clicking on the thumbnail. When I change the class to .thumbnail in the second click function it successfully removes the thumbnail. I've tried adding the image with the class .thumbnail instead of .stretch which did work but they didn't disappear after clicking on them again.

This code adds the picture but doesn't remove it when clicking on the picture again.

$('.thumbnail').click(function(){
    $('<img class="stretch" src="_DSC1671.jpg">').insertAfter('.header');
});
$('.stretch').click(function(){
    $(this).remove();
});

This code removes the thumbnail pictures successfully.

$('.thumbnail').click(function(){
    $(this).remove();
});

This code adds the picture with the same attributes as the original thumbnails, removes the original thumbnails when clicked on them but doesn't remove the added thumbnails.

$('.thumbnail').click(function(){
    $('<img class="stretch" src="_DSC1671.jpg">').insertAfter('.header');
});
$('.thumbnail').click(function(){
    $(this).remove();
});

So I'm not sure what I'm doing wrong here. Apparently it has to do with the fact that the images are added in retrospective.

Thank you in advance for any assistance.

score 1 · Answer 1 · answered Aug 17 '14 at 09:54

1

As the element with the class .scretch doesn't exist when you bind the click-handler, the "click" event won't trigger either. To fix this you can either bind the click-handler after you create the element or bind the click-handler to the document-element.

   $(document).on("click", ".scretch", function() {
     $(this).remove();
   });

answered Aug 17 '14 at 09:54

Pete TNT

8,293
4
36
45

I understand what you're saying but I'm afraid this doesn't work either. – Joachihm Aug 17 '14 at 10:10
1

I forgot to thank you by the way. I believe I have an additional problem in my code. – Joachihm Aug 17 '14 at 10:22

score 0 · Answer 2 · answered Aug 17 '14 at 09:57

0

Issue is that .stretch is dynamically created element. Direct event is not bind to dynamic element. So replace your .stretch click event wit below.

$('body').on('click','.stretch',function(){
    $(this).remove();
});

answered Aug 17 '14 at 09:57

Prasad.CH

492
1
5
25

score 0 · Accepted Answer · edited May 23 '17 at 12:11

0

Here is an example: http://jsfiddle.net/yfukm8kh/

<button class="thumbnail" >my button</button>
<div class="header"></div>
<script>
    $(document).ready(function(){
        $('.thumbnail').click(function()
            {
            $('<img class="stretch" src="http://read.pudn.com/downloads183/sourcecode/graph/texture_mapping/857705/edge&corner/lenna__.jpg">').insertAfter('.header');
            });
        $(document).on('click','.stretch',function()
            {
            $(this).remove();
            });
    });
</script>

Look for binding dom elements for more details e.g. Event binding on dynamically created elements?

edited May 23 '17 at 12:11

Community

1
1

answered Aug 17 '14 at 10:13

matti2515

63
1
8

Thanks a lot but I'm afraid that doesn't work for me either. I mean I can tell from the example that the code itself does work but for some reason it doesn't work when I implement it. I'm assuming the problem is not in my js code but rather css or html. Any idea what could possibly be the cause? – Joachihm Aug 17 '14 at 10:31
Paste us your sample page where you testing this code. To be honest on jsfiddle it's work for me perfectly... – matti2515 Aug 17 '14 at 10:37
It does work perfectly. I pasted my complete code into jsfiddle and after removing parts of my header it did work. I linked to an older version of jQuery in my header and after replacing the link with an updated one it works perfectly now. Thanks for your help. – Joachihm Aug 17 '14 at 10:50

Removing an added image again

3 Answers3