Question

i am trying through jquery to remove a div completely when there is no child element within it. The variable I am using is an image. I can't seem to select the variable as an image, i only know how to do this through text. Could someone please help me and resolve this issue, so it detects that there is a img contained within the div and displays it and when there isn't an image it doesn't display it.

I have uploaded it through jsfiddle:http://jsfiddle.net/cLkFD/

<div class="content-container"><!--content-container-->
    <h3>title</h3>
        <div class="picture"><!--picture-->
            <img src="images/buddha.jpg" width="981" height="324" alt=""/> 
        </div><!--/picture-->
        <div class="content"><!--content-->
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et cursus neque, sit amet blandit tellus. Cras leo mauris, laoreet quis consequat et, pharetra mattis risus. Duis tortor lorem, ultrices egestas arcu sed, pretium egestas est. Morbi condimentum sem quis tortor placerat iaculis. Ut nisl augue, rutrum sed sem et, blandit hendrerit nibh. Donec et rhoncus odio, id tempor enim. Praesent ultricies justo vulputate dui gravida fermentum. Pellentesque id aliquet leo. Quisque vulputate, dolor vel rutrum accumsan, turpis odio faucibus sem, vel malesuada eros turpis ac magna. Nullam fermentum vehicula odio, ut ornare justo varius nec. Morbi lectus leo, porttitor nec elementum at, suscipit aliquam nunc. Ut gravida a sem ut imperdiet. Duis et turpis eget magna lobortis accumsan. In ac tincidunt nibh, quis pulvinar risus.
            </p>
            <button class="btn btn-1 btn-1a">Read More</button>
        </div><!--content-->  

    </div><!--content-container-->

(function($) {
    $.fn.equalHeights = function(minHeight, maxHeight) {
        tallest = (minHeight) ? minHeight : 0;
        this.each(function() {
            if($(this).height() > tallest) {
                tallest = $(this).height();
            }
        });
        if((maxHeight) && tallest > maxHeight) tallest = maxHeight;
        return this.each(function() {
            $(this).height(tallest).css("overflow","hidden");
        });
    }
})(jQuery);
Was it helpful?

Solution 2

http://jsfiddle.net/9VBJP/

The above fiddle should work

$('.picture').each(function(){
    var imageElem = $(this).find('img');
    if(imageElem.length == 0) {
        $(this).hide();
    }
});

OTHER TIPS

You can check to see whether any image inside your div or not using length:

$(function () {
    $('.picture').each(function () {
        if ($(this).find('img').length) {
            $(this).hide();
        }
    });
}); 
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top