从页面中删除图像（如果已存在）

Question

我在不同的div中获得了多个图像，但有时两个图像完全相同。 如何从页面中删除除这些图像之外的所有图像？

这有可能与jquery / javascript？ 甚至是css？

例：

<div id="Content">
 <div class="Media">
  <img src="1.jpg">
 </div>
</div>
<div id="Content">
 <div class="Media">
  <img src="2.jpg">
 </div>
</div>
<div id="Content">
 <div class="Media">
  <img src="1.jpg">
 </div>
</div>
<div id="Content">
 <div class="Media">
  <img src="4.jpg">
 </div>
</div>
<div id="Content">
 <div class="Media">
  <img src="1.jpg">
 </div>
</div>

我如何制作它只显示其中一个div：

<img src="1.jpg">

这是服务器端代码它返回一个大的json文件，包含来自twitter页面的所有帖子，但我不认为有可能过滤它，所以它首先检查重复项？

       success: function(data){
           twitter = JSON.parse(data);
                for(var key in twitter.statuses){
                    if (typeof twitter.statuses[key].entities.media != "undefined") {

                            if( $.inArray(twitter.statuses[key].entities.media, container) == -1 ) {
                            container.push(twitter.statuses[key]);
                            }
                        }
                }
           },
       error: function(data){
           console.log(data);
       }

我希望有人知道如何解决这个问题谢谢！

Answer 1

您可以获取所有IMG标记，并查看src是否唯一。 如果不是，您可以将其删除。 这是一个例子：

$(document).ready(function() {
  var img = $("img");
  var used = {};
  img.each(function() {
    var src = $(this).attr('src');
    if(used[src]) $(this).remove();
    used[src]=1;
  });
})

CodePen： http ：//codepen.io/cfjedimaster/pen/tDprC

Answer 2

我正在使用jQuery的过滤器函数 。

首先，我从'Media'类中选择所有图像子元素。 之后，我使用过滤器函数将匹配元素集合减少到那些不在我的数组中的元素。 然后我删除它们。 （包括父节点）

我不确定这是否是理想的解决方案，但你可以尝试一下。

$(function() {
var $allImages = $( '.Media > img' ),
    tmp,
    allUsedImageSrcs = [];

$allImages.filter( function() {
    tmp = $( this ).attr( 'src' );

    if( $.inArray( tmp, allUsedImageSrcs ) < 0 ) {
        allUsedImageSrcs.push( tmp );
        return false;
    }

    return true;
}).closest( '#Content' ).remove();});

这是我使用jQuery实现的一个小提琴，尽管你可以在没有jQuery的情况下实现相同的功能。

http://jsfiddle.net/6jb3hoc9/1/

Answer 3

用javascript你可以像那个（伪）想法那样做

$('#content.media img'){
   //fill the array with src 
   //check if array item is same 
   //remove item 
    var array;//array of src tag
    foreach(item in array as value) 
     if(value['src'] == value['src'])
      {
           arr.remove();
          //remove item from dom **
        }

}

如何从DOM中删除项目http://www.w3schools.com/js/js_htmldom_nodes.asp

Answer 4

我已经为你写了这个功能。

 window.addEventListener("load", function () {
    var images = Array.prototype.slice.call(document.getElementsByTagName('img'));

    if (images.length == 0) {
        return;
    }

    (function handleImages(imgHash) {
        var process = function (image) {
            if (typeof imgHash[image.src] == 'undefined') {
                imgHash[image.src] = true;
            } else {
                image.parentNode.removeChild(image);
            }
        };

        setTimeout(function () {
            process(images.shift());
            if (images.length > 0) {
                setTimeout(function () {
                    handleImages(imgHash);
                }, 0);
            }
        }, 0);
    })({});
}, false);

关于你的另一个问题。 您必须将逻辑重写为成功才能成为异步。 检查一下：

success: function(data){
    var twitter = JSON.parse(data);
    var props = Object.getOwnPropertyNames(twitter.statuses);
    var result = [];
    var dfd = $.Deferred();

    if (props.length == 0) {
        return;
    }

    (function handleProps(propsHash) {
        var process = function (prop) {
            if (typeof twitter.statuses[prop].entities.media != "undefined" && typeof propsHash[twitter.statuses[prop].entities.media] == 'undefined') {
                result.push(twitter.statuses[prop]);
                propsHash[twitter.statuses[prop].entities.media] = true;
            }
        };

        setTimeout(function () {
            process(props.shift());
            if (props.length > 0) {
                setTimeout(function () {
                    handleProps(propsHash);
                }, 0);
            } else {
                dfd.resolve(result);
            }
        }, 0);
    })({});

    dfd.done(function(result) {
        console.log(result);
    });
}

而是console.log（结果）; 你必须调用其他代码来处理结果。

Answer 5

有点不知道你想要什么。

假设您要使用重复的src删除img元素。

// Retrieve all the images
var imgs = document.querySelectorAll(".Media > img");

// To memorize srcs appear before
var srcExisted = [];

for (var i = imgs.length - 1; i >= 0; i--) {

    if (srcExisted.indexOf(imgs[i].src) < 0) {

        // The 1st appearing, memorize
        srcExisted.push(imgs[i].src);

    } else {

        // Already existed, remove
        imgs[i].parentNode.removeChild(imgs[i]);
        imgs[i] = null;

    }
}