Trying to hide a H3 on jQuery with a somewhat complex css structure

At the moment i'm working on a site on wordpress and i've stumbled upon a problem.

I'm trying to hide a Heading 3 that's in a div. Though it's from a 960gs structure so the problem is that I need to hide that specific H3 on that page although I have multiple divs with the same name+heading 3's.

Now what I tried on my css is this:

CSS:

<div class="item col_2">
    <div class="phone">
        <img src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" height="<?php echo $image[2]; ?> " alt="<?php echo $alt_img; ?> "/>
        <?php //echo $content; ?>
    </div>
</div>

jQuery:

$('.item col_2 .phone:empty').closest('.item col_12 h3').remove();

Screenshot:

So what I tried to do was remove the heading "mobiel" whenever the "php inside" wouldn't fetch images in other words if noone uploaded anything.

Now my jquery isn't working but i'm pretty sure when it does it'll hide all h3's on my site with .col_12 h3 inside of it? If it does and there's no solution then i'll just blatantly paste it on the same page but first I'll need to fix my jQuery so it'll work at all.

Answers


I had some trouble re-creating your problem, so I made a fiddle. The problem is with the :empty selector I think. This seems to be a rather shady selector. I replaced it with a check for html().length

Code

$('.item.col_2 .phone').each(function(){    
if( !$.trim( $(this).html() ).length ){
    $(this).parent().prev().find('h3').remove();
}
});

Check my fiddle for an example http://jsfiddle.net/Esn2j/

For empty in stead of remove change remove() to emtpy(). Like so

$('.item.col_2 .phone').each(function(){    
if( !$.trim( $(this).html() ).length ){
    $(this).parent().prev().find('h3').empty();
}
});

UPDATE:

To check if the source of the image is empty, use the following code:

$('.item.col_2 .phone').each(function(){    
if($(this).find("img").attr("src") == ""){
    $(this).parent().prev().find('h3').empty();
}

});

Check my updated fiddle:

http://jsfiddle.net/Esn2j/2/

Anthony's suggestion to use the clearfix as selector:

$('.clearfix').prev().find("h3").empty();

http://jsfiddle.net/Esn2j/3/

This works for every H3 that is in a div before a clearfix however.

UPDATE: This checks all the elements if the div with class thumbs is inside or not, by checking your code, I think this is created when the image exists. If the div with class thumbs is not inside, the H3 gets emptied.

$(".item.col_12").not(':has(.thumbs)').each(function(){
    $(this).find("h3").empty();
});

Check the new fiddle http://jsfiddle.net/Esn2j/4/

ANSWER: The code that generates the images is wrapped inside a div with the class .confirm

The following code checks if that div exists on the page, if it exists, checks if it is empty or not, of it is empty, H3 tags are emptied.

if($(".confirm").length >0 ){
    if( !$.trim( $(".confirm").html() ).length ){
        $(".item.col_12").find("h3").empty();
    }
}

Try this:

$('.item.col_2 .phone:empty').parent().prev().find('h3').remove();

Basically, if div is empty, go to its parent(.item.col_2), then go one element up(.item.col_12) and find h3 inside that element

The closest() function that you used is searching the closest parent in the hierarchy tree.

You could use

$('.phone:empty').parent().prev().find('h3').remove();

to target all the .phone divs and then traverse through the elements

Not sure how are you inserting your data into .phone div but I believe that if you have whitespaces or newline spaces inside it the jQuery :empty will return false.

JSFIDDLE EXAMPLE

EDIT:

Why don't you use PHP to check if the $content is empty end then print appropriate divs?


Need Your Help

Sorting xts data to look like panel data in R

r sorting time-series xts panel-data

I need to use 'PerformanceAnalytics' package of R and to use this package, it requires me to convert the data into xts data. The data can be downloaded from this link: https://drive.google.com/file/d/