Question

当用户点击添加按钮时，以下样式块会继续添加到列入候选的篮子中。另外，我想在删除选项

时删除整体样式块

$('<style type="text/css" id="myEffect">' + 
            '.ui-effects-transfer { background: url('+thumbnailImg+')  no-repeat; }' +
            '</style>').appendTo('.shortListed-Basket');

我试过了$('#myEffect').remove();但它没有用。请帮我。感谢

Answer 1

如果该块尚未存在，则仅添加该块：

if ($("#myEffect").length == 0) {
    $('<style type="text/css" id="myEffect">' + 
        '.ui-effects-transfer { background: url('+thumbnailImg+')  no-repeat; }' +
        '</style>').appendTo('.shortListed-Basket');
}

然后你应该能够用以下方法删除它：

$("#myEffect").remove();

Answer 2

确保在加载脚本并且DOM包含样式块时触发$('#myEffect').remove();，我尝试了相同的操作，当我从控制台运行$('#myEffect').remove();时，样式标记已成功删除

<div class="shortListed-Basket"></div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
var thumbnailImg = "test";
$('<style type="text/css" id="myEffect">' + 
            '.ui-effects-transfer { background: url('+thumbnailImg+')  no-repeat; }' +
            '</style>').appendTo('.shortListed-Basket');
</script>

Answer 3

您的评论：

当用户点击添加按钮

时，样式块会继续添加到入围的购物篮中

 $('<style type="text/css" id="myEffect">' + 
    '.ui-effects-transfer { background: url('+thumbnailImg+')  no-repeat; }' +
    '</style>').appendTo('.shortListed-Basket');

这说明您要添加具有相同ID的多个样式块，这是无效的，因为在单个页面中您必须使用唯一ID。因此，有两种方法可以通过添加某种增量编号（例如id1, id2, ...）来应用唯一ID，或将ID更改为类别id="myEffect"更改为class="myEffect"。

现在你可以试试这个：

 $('<style type="text/css" class="myEffect">' +
    '.ui-effects-transfer { background: url('+thumbnailImg+')  no-repeat; }' +
    '</style>').appendTo('.shortListed-Basket');

现在如果要删除此样式，请使用：

$('.shortListed-Basket').find('.myEffect').remove();

如何删除动态添加的样式块

3 个答案: