如何清除以前加载的图像并添加新图像

时间:2013-12-03 12:55:28

标签: jquery

我对jsonp有一个要求,我做了所有这些更改,这里有一个问题。 一旦我在文本框中输入标签名称,图像将显示应该没问题。问题是,一旦我添加另一个标签,之前加载的图像不会被清除(将被隐藏),图像显示在同一行。标签名称是:冬天,动物,鸟,巴黎。这是我的代码

    $('#idSubmit').click(function(){    
   var txtVal = $('#idText').val(); 
    $.ajax({
            type:'GET',
            url:"http://api.flickr.com/services/feeds/photos_public.gne?tags="+txtVal,
            data:"&lang=en-us&format=json&jsoncallback=?",
            success:function(data) {
            //var thing = $('body :contains("Web")').text();
                $.each(data.items, function(i, item) {
                    //$("<div/>").appendTo(body)
                     alert(item);                   
                    var tagImgs = $("<img/>").attr("src", item.media.m).appendTo("#images");
                    var tagNames = item.tags;
                    var tagNames = tagNames.split(' ');                 
                    if (tagImgs){
                        $("<div/>").html(tagImgs).appendTo("body").attr('title',tagNames[0]);
$("<div/>").html(tagImgs).appendTo("body").attr('title',tagNames[0]);                       
                        if (i == 9) return false;
                    }                   
                });
            },
            dataType:'jsonp'
       });
  });

这是小提琴fiddle

2 个答案:

答案 0 :(得分:2)

不确定我是否理解正确,但如果您要删除已加载的图片,则可以执行以下操作: $('img').remove();代替$('img').attr('src', '');

答案 1 :(得分:1)

class 添加到要追加的元素

$("<div/>").html(tagImgs).appendTo("body")
        .attr('title',tagNames[0])
        .addClass('added');

使用此引用,您可以删除现有元素,然后再附加

 $('.added').remove();
 $("<div/>").html(tagImgs).appendTo("body")
            .attr('title',tagNames[0])
            .addClass('added');

选中此fiddle