CODEWITHSUNDEEP
javascriptjqueryhtml
Matthew
Matthew

Reputation: 2246

Remove Appended Element on Second Click jQuery

When you click the gray heart, the div gets appended to a container on the right side. I want it to remove the appended element when you click the pink heart. It just keeps appending the content...

$('.icon-heart').click(function(){
    var $newEl = $(this).closest('.color-container').html();

        if( $(this).css('color') === 'rgb(204, 204, 204)' ) { // if gray
            $(this).css('color', 'rgb(234, 76, 136)'); // turn to pink

            $('.b').append($newEl); // append new element


        } else if( $(this).css('color') === 'rgb(234, 76, 136)' ) { // if pink
            $(this).css('color', 'rgb(204, 204, 204)'); // turn to gray
            $newEl.remove(); // remove appended element
        }

});

Here is the Fiddle

Upvotes: 1

Views: 514

Answers (3)

entropic
entropic

Reputation: 1683

You aren't actually grabbing the element you need to remove - you're trying to remove a second copy of the element that hasn't been attached anywhere. To remove the element, you want to find it in your second list, then remove it. So the second part of your if statement becomes this:

else if ($(this).css('color') === 'rgb(234, 76, 136)') { // if pink
    $(this).css('color', 'rgb(204, 204, 204)'); // turn to gray
    $('.b').find(".color-block[data-color='" + $(this).closest(".color-block").data("color") + "']").remove();
}

Working Fiddle: http://jsfiddle.net/XDk6s/7/

Upvotes: 1

adeneo
adeneo

Reputation: 318182

Seems like there should be easier ways to do that, checking a returned color from the browser is never a very good idea, as it's not very consistent.

Instead, add a class

.pink {
    color: #EA4C88;
}

Then do 

$('.icon-heart').click(function () {

    if ($(this).is('.pink')) {
        if ($(this).data('el')) $(this).data('el').remove();
    }else{
        var clone = $(this).closest('.color-container').clone();
        $('.b').append(clone);
        $(this).data('el', clone);
    }

    $(this).toggleClass('pink');
});

FIDDLE

Upvotes: 3

Hackerman
Hackerman

Reputation: 12305

Try this:

else if ($(this).css('color') === 'rgb(234, 76, 136)') { // if pink
    $(this).css('color', 'rgb(204, 204, 204)'); // turn to gray
    $('.b div').last().remove(); // remove appended element
}

Working fiddle: http://jsfiddle.net/robertrozas/XDk6s/3/

Upvotes: 1

Related Questions