Remove empty <ul> tag with jquery

Question

I have code as 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 create sub "ul" tags that have "li" tags with jquery when my page loads. How can i do Thanks for the help.

Answer 1

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

Answer 2

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

Answer 3

jQuery :empty , UL .

, , - :

$("#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

, , :

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

<ul> id jsddm, .

Answer 5

:

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

, .

Answer 6

:

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