在第二次单击jQuery上删除附加元素

Question

当您单击灰色心脏时， div会附加到右侧的容器中。 当您单击粉红色的心时，我希望它删除附加的元素。 它只是不断追加内容...

$('.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
        }

});

这是小提琴

Answer 1

似乎应该有更简便的方法，从浏览器检查返回的颜色绝不是一个好主意，因为它不是很一致。

而是添加一个类

.pink {
    color: #EA4C88;
}

然后做

$('.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');
});

小提琴

Answer 2

尝试这个：

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
}

工作提琴： http : //jsfiddle.net/robertrozas/XDk6s/3/

Answer 3

您实际上并没有抓住要删除的元素，而是试图删除该元素的第二个副本，该副本未附加在任何地方。 要删除该元素，您想在第二个列表中找到它，然后将其删除。 因此，您的if语句的第二部分变为：

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();
}

工作小提琴： http : //jsfiddle.net/XDk6s/7/