Remove image from page if it already exists

Question

I got multiple images in different divs but sometimes 2 images are exactly the same. How do I remove all except one of those images from the page?

Is this possible with jquery/javascript? Or even css?

Example:

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

How do I make it so it only shows one of the divs with:

<img src="1.jpg">

This is the server side code It returns a big json file with all the posts from the twitter page but i didnt think it was possible to filter it so it checks for duplicates first?

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

I hope someone knows how to solve this problem Thanks!

Answer 1

You can get all the IMG tags and see if the src is unique. If it isn't, you can remove it. Here is an example:

$(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 here: http://codepen.io/cfjedimaster/pen/tDprC

Answer 2

I'm using the filter function from jQuery.

First, I'm selecting all image child elements from the 'Media' class. After that, I'm using the filter function to reduce the set of matched elements to those, which aren't in my array. Then I'm deleting them. (Including the parent node)

I'm not sure whether this is the ideal solution, but you can give it a try.

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

Here's a fiddle of my implementation with jQuery, although you could achieve the same functionality without jQuery.

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