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
        }

});

以下是Fiddle

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

FIDDLE

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/

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

3 个答案:

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