Удалить изображение со страницы, если оно уже существует

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> 

Как сделать так, это только показывает один из дивы с:

<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

Я использую filter function из jQuery.

Во-первых, я выбираю все дочерние элементы изображения из класса «Медиа». После этого я использую функцию фильтра, чтобы уменьшить набор согласованных элементов до тех, которые не находятся в моем массиве. Затем я удаляю их. (Включая родительский узел)

Я не уверен, является ли это идеальным решением, но вы можете попробовать.

$(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 2

С помощью 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 3

Вы можете получить все теги IMG и посмотреть, если ЦСИ уникален. Если это не так, вы можете удалить его. Вот пример:

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

Тип не знаю, чего вы хотите.

Предположим, вы хотите удалить элемент img с дублированным src.

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

    } 
}