Javascript 如果图像已存在，请从页面中删除该图像

我在不同的分区中得到了多个图像，但有时两个图像完全相同。 如何从页面中删除除其中一个图像之外的所有图像

这在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>

---

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

使用javascript，您可以像这样（伪）实现它

---

如何从DOM中删除项

您可以获得所有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;
  });
})

---

这里的代码笔：

我已经为您编写了这个函数

 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才能异步。 选中此项：

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（result）；您必须调用其他将

---

处理结果

有点不知道你想要什么

假设您想要删除带有重复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;

    }
} 

//检索所有图像
var imgs=document.querySelectorAll（“.Media>img”）；
//记忆以前出现的src
var=[]；
对于（变量i=imgs.length-1；i>=0；i--）{
if（srceexisted.indexOf（imgs[i].src）<0）{
//第一次出现，记住
src.push（imgs[i].src）；
}否则{
//已存在，请删除
imgs[i].parentNode.removeChild（imgs[i]）；
imgs[i]=null；
}
} 

我正在使用来自jQuery的

首先，我从“媒体”类中选择所有图像子元素。之后，我将使用filter函数将匹配的元素集减少为那些不在数组中的元素。然后我要删除它们。（包括父节点）

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

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

$（函数（）{
变量$allImages=$（'.Media>img'），
tmp，
allUsedImageSrcs=[]；
$allImages.filter（函数（）{
tmp=$（this.attr（'src'）；
如果（$.inArray（tmp，allUsedImageSrcs）<0）{
冲积物影像srcs.push（tmp）；
返回false；
}
返回true；
}).closest（“#Content”）.remove（）；}）；

下面是我使用jQuery实现的一部分，尽管您可以在没有jQuery的情况下实现相同的功能

---

此html是动态生成的吗？在解析提要时这样做肯定更好？您能发布生成html的代码吗？你不想创建所有的html，然后必须删除其中的一些。这将浪费资源。映像是否相同，但源是否不同？这需要在服务器端完成，以便您可以确定映像是否为转发。除非您可以向图像添加一个属性来告诉JavaScript它是一个转发。在这个脚本中使用的是什么？oops-抱歉-一秒钟-让我注意一下，我的演示HTML有

。如果我的remove（）也删除了父p，那么它可能会更好。因为这取决于您的HTML，尽管这完全取决于您的HTML对您必须在加载事件时调用它。我将更改代码。这个解决方案是异步的。这很重要。同步代码会杀死浏览器。我不认为这个问题与上面发布的代码有关。我的猜测是，您试图使用ajax获取一些外部资源，但失败了，但我可能错了。

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

// 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;

    }
} 

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