CODEWITHSUNDEEP
javascriptjqueryhtml
Nick Bewley
Nick Bewley

Reputation: 9289

Dynamically added element will not delete

Why does .mydiv img not get removed in this codeblock?

$( document ).on( "click", '.onhover', function() {
    $('.mydiv img').remove();
    var clone = $('.onhover').clone();
    $('.mydiv').append(clone);
});

Also I should add that each image's src is base64, not sure if that is the problem.

EDIT: .onhover html

<img class="onhover" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4A...Am1QaMG+m7GaFP+FMUDQBFHUkTMCkZGFdLgDklAJgAcjeFOZgU+RP+FEUDQFFH2gRgijRgmtH+bkb/s5iAaesECH+KogGgKJqAMdAfN1rf689tf2uSpk0CdlvYR/hTFA0ARR15EzDKGMw6TSCmSBVm1TiAzwJ6PwLwhD9F0QBQ1JEyAcDkKQFMMZqfFfzTLgPcTRowy6h/XBJA+FMUDQBFHWkTMM4AYIqUABMeexoT4KdMBMYZhEmjfsKfomgAKIomYMo0YNJof9bCv0lJwChoz3I/MEXkT/hTFA0ARR1FEzApDZhkGMYBfzcJwCzwngX8hD9F0QBQFE3AHI3AtKnCbkb/uxnRT/s4hD9F0QBQFNOAKW7vBvR7TQCmhf7M4Cf8KYoGgKJoAnZnBCb9m73WAEwLcoKfomgAKIqagwmYBPNZ/99x908z6p+XUSD8KYoGgKKoXRqBeY3095oMTDIBBD9FLaj+/wEAfEsmcAJIeAcAAAAASUVORK5CYII=" style="float:left; height: 100%; position: relative; width: 55px; margin-right: 4px;">

Upvotes: 0

Views: 54

Answers (2)

paolo
paolo

Reputation: 2538

This is probably what you want.

$('.onhover').on("click", function () {
    $('.mydiv').html($(this).clone());
});

fiddle here

EDIT:

I have an updated code here that supports thumnails and full-size images for the single view:

http://jsfiddle.net/paoloposo/kqukymy3/5/

Upvotes: 1

Ryan Wheale
Ryan Wheale

Reputation: 28430

You need to clone before you remove. You can also make sure you are removing the thing being clicked:

$( document ).on( "click", '.onhover', function() {
    var $this = $(this),
        $parent = $this.parent(),
        $clone = $this.clone();

    $this.remove();
    $parent.append( $clone );
});

EDIT: Assuming that .mydiv is somewhere else on the page... maybe something like this:

<div class="mydiv"></div>

<div class="thumbnails">
    <img class="onhover" src="img1.jpg" />
    <img class="onhover" src="img2.jpg" />
    <img class="onhover" src="img3.jpg" />
</div>

...then you would want to use the following code instead:

var $mydiv = $('.mydiv');
$( document ).on( "click", '.onhover', function() {
    var $clone = $(this).clone().removeClass('onhover');
    $mydiv.empty().append( $clone );
});

Upvotes: 0

Related Questions