Jquery To Hide A Div If It Has No Unordered List Items

I am having trouble coming up with a jQuery script that will all content of a div if there are no unordered list items present. So if there are unordered list items inside of the d

Solution 1:

Try this:

$(document).ready(function() {
    $('#contentFirst').hide();
    $('#contentFirst').has('ul').show();
});

Solution 2:

Firstly, it looks like you may have a typo :)

<divid="contenFirst">Sample Content. Not display if not bullets points exists
<ul>

Your contentFirst is missing a "t".

Secondly, you want to count the <li> list items, but the immediate child of contentFirst is the <ul> which will never go away, so contentFirst will always have content.

You could do this:

if($("#contentFirst").find("li").length === 0){
    $("#contentFirst").hide();
} 

find() will return all of the <li> items even if they are not immediate children!

Solution 3:

This will return true if your div doesn't have any unordered lists:

if($("#contentFirst ul").length == 0){

Also if you want to simply hide your div if it doesn't have a ul you can do the following:

$("#contentFirst:not(:has(ul))").hide();