Question

I load in a div with class name “.preview” image’s gallery like this:

<img src="http://i2.cdn.turner.com/cnn/dam/assets/120226120954-mandela-paper-t1-main.jpg" alt="120226120954-mandela-paper-t1-main">
<img src="http://i2.cdn.turner.com/cnn/dam/assets/120226120954-mandela-paper-t1-main.jpg" alt="120226120954-mandela-paper-t1-main">
<img src="http://i.cdn.turner.com/cnn/.e/img/3.0/global/icons/video_icon.gif" alt="Video_icon">
.
.
.

I have this function for remove img if exist a condition:

 $('.preview').load(function(e){
   img = $(this).find('img');
  if((img.height() < 50) || (img.width() < 50)){
   img.remove();
  }
 });

My problem is that every images are removed

I just want to remove from “.preview” the images which have a width or height less than 50px.

Edited

I get in every images the value “0” for height in alert for this code, so delete every the images. But the images have not this value.

$('form#get_url_image').bind('ajax:success', function() {

$('.preview img').load(function() {
  var $img = $(this);
   alert ($img.height());
   if ($img.height() < 50 || $img.width() < 50) {
       $img.remove();
   }  
});
});

I get the images with each block:

<div class="preview">
 <% @images_urls.each do |image_url| %>
  <%=  image_tag "#{image_url}" %>
 <% end %>
</div>

Answer 1

You have to loop through the individual <img> elements.

Given your HTML and code, I think that you want to check the dimensions of the images after they have loaded. To do so, use:

$('.preview img').load(function() {
   var $img = $(this);
   if ($img.height() < 50 || $img.width() < 50) {
       $img.remove();
   }
});