Remove empty <ul> tag with jquery

Question

I have code like above

     ` <ul id="jsddm">

                            <li><a href="Default.aspx">
                                Menu</a>
                                <ul style="visibility: hidden;">


                                            <li><a href="Content.aspx?ID=153">
                                                SubMenu</a></li>


                                            <li><a href="Content.aspx?ID=152">
                                                SubMenu</a></li>

                                </ul>
                            </li>

                            <li><a href="#">
                                Menu</a>
                                <ul style="visibility: hidden;">

                                </ul>
                            </li>

                </ul>
            </div>`

I want to romove empty sub "ul" tags which is has got not "li" tag(s) with jquery when my page onload. How can I do? Thanks for help.

Answer 1

I think:

$('li ul:empty').remove();

will do what you want.

Answer 2

Try this:

$(document).ready(function () {
    $("#jsddm ul").empty();
});

Answer 3

The jQuery :empty selector would work if your UL elements really were empty, and didn't contain any white space.

To check for both empty and elements with white space you could do something like this:

$("#jsddm ul").each(function(i, el) {
    // Remove white space
    var html = $(el).html().replace(/\s+/, "");

    // Check if element is :empty or length of html is zero
    if ($(el).is(":empty") || html.length == 0)
        $(el).remove();
});

Answer 4

I think this is what you're looking for:

$('#jsddm ul').each(function() {
  if ($(this).children().length == 0) {
    $(this).remove();
  }
});

It removes all the <ul> elements under the element with id jsddm which do not contain child nodes.

Answer 5

$("ul").each(
  function() {
    var elem = $(this);
    if (elem.children().length == 0) {
      elem.remove();
    }
  }
);

Answer 6

$('ul').not(':has(li)').remove();