检查子元素，如果子元素存在则隐藏父元素

Question

I have tried this:

<script>
$(document).ready(function() {
  $('#title_article:not(:has(>hr:first-child))').hide();
});
</script>

---

But never shows..

---

<div id="title_article">
    <span style="padding-left:121px;">Article | </span>
    <span class="entry-date"><?php echo get_the_date(); ?></span>
</div>

Seeking to check for child element of <hr> if <hr> exists hide parent or #title_article

<hr> would not be within <div id="title_article"></div> but below:

<!-- page content -->

    <div id="title_article></div>
    <hr>

<!-- page content -->

Answer 1

$(document).ready(function() { 

 if($("#title_article").next("hr").length==0)

    $("#title_article").hide()

});

http://fiddle.jshell.net/prollygeek/57gcx6or/3/

Edit: Use .siblings()

Answer 2

You are looking for .next()

Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

You have to do something like:

if ($('#title_article').next('hr').length)
    $('#title_article').hide();

In your example, <hr> is not a child element of #title_article , but a sibling.

Answer 3

You could use the children function jQuery has to offer.

Try it in this context:

if($('#title_article').children('hr').length > 0) {
    $('#title_article').hide();
 }

Or this:

if($('#title_article').children('hr').length != 0) {
    $('#title_article').hide();
 }

You could also use the parent function

Try it in this context:

$('#title_article hr').parent().hide();

This will hide every #title_article that has an hr in it.