Count how many UL Elements there are in a Div with Javascript?

Question

I am dynamically adding UL elements to a DIV element. I would like to be able to count how many UL elements there are inside the DIV so that once all the ULs are removed dynamically I can delete the DIV that they are contained in.

<div id="000">

<ul id="000-1">
<li>Stuff</li>
<li>Stuff</li>
</ul>

<ul id="000-2">
<li>Stuff</li>
<li>Stuff</li>
</ul>

</div>

Is there a simple Javascript solution that counts the amount of ULs so that I can do something like this.. ?

if(ulcount == 0){

var remove = document.getElementById("000");
remove.innerHTML = '';
results.parentNode.removeChild("000");

}

Thanks.

Answer 1

@Cheeso's answer is a good pure-JS solution. But, if you're using jQuery, the process can be made simpler.

jQuery('div#000').children('ul').length;

The above code will return the number of child ul elements of the div#000.

To update the count when you add elements dynamically, you will have to create a function and call it to update the number whenever a change occurs:

function countUls() {jQuery('div#000').children('ul').length;}

Bind that to an event so that it will be called when you want to update the number.

Answer 2

Code:

    function getDirectChildrenByTagName(elt,tagname) {
        var allChildren = elt.children, wantedChildren=[], i, L;
        tagname = tagname.toUpperCase();
        for(i=0, L=allChildren.length; i<L; i++) {
            if (allChildren[i].tagName.toUpperCase() == tagname) {
                wantedChildren.push(allChildren[i]);
            }
        }
        return wantedChildren;
    }

use it like this:

var zero = document.getElementById("000");  
var uls = getDirectChildrenByTagName(zero, 'UL');
var ulCount = uls.length;
  ....

Answer 3

Try this:

var x = document.getElementById("000-1").querySelectorAll("li").length
                  console.log(">>>>", x);