如何使用js或jquery删除空ul

How to remove empty ul with js or jquery

本文关键字：删除 ul jquery 何使用 js 更新时间：2023-09-26

我有一个从DB动态构建的列表，但有一些空的Ul项需要删除。

   <div class="pull-right">
        <ul id="menu">
            <li class="ui-state-disabled">menu</li>
            @foreach (var item in Model.Categorylst)
            {
                <li>
                    <a href="#">
                        @Html.DisplayFor(x => item.CategoryName)
                    </a>
                </li>
                <li id="myli1" >
                    <ul id="myul">
                        @foreach (var subtoCat in Model.CategoryToSub)
                        {
                            if (item.CategoryId == subtoCat.CategoryId)
                            {
                                foreach (var sub in Model.SubCategorylst)
                                {
                                    if (sub.SubCategoryId == subtoCat.SubCategoryId)
                                    {
                            <li id="myli2">
               <a id="mya" href="#">@Html.DisplayFor(x => sub.SubCategoryName)</a>
                            </li>
                                    }
                                }
                            }
                        }
                    </ul>
                </li>
            }
        </ul>
    </div>

我试着使用Jquery并尝试了一些函数，但它仍然没有删除空的Ul。我能做些什么来移除它们？此视图为局部视图。

ID必须是唯一的，您可以像一样使用它

 @foreach (var item in Model.Categorylst)
            {
                <li>
                    <a href="#">
                        @Html.DisplayFor(x => item.CategoryName)
                    </a>
                </li>
                <li id="myli1-@(item.Id)" >
                    <ul id="myul-@(item.Id)">
                        @foreach (var subtoCat in Model.CategoryToSub)
                        {
                            if (item.CategoryId == subtoCat.CategoryId)
                            {
                                foreach (var sub in Model.SubCategorylst)
                                {
                                    if (sub.SubCategoryId == subtoCat.SubCategoryId)
                                    {
                            <li id="myli2-@(item.Id)">
               <a id="mya" href="#">@Html.DisplayFor(x => sub.SubCategoryName)</a>
                            </li>
                                    }
                                }
                            }
                        }
                    </ul>
                </li>
            }

您可以使用jquery删除ul元素，如下所示

$("ul[id^='myul']").each(function (){
if(($(this).html()==''))
{
    $(this).remove();
}
})

FIDDLE

试试这个。。。

$("#menu ul").each(function(){
    if($(this).html() == '')
        $(this).remove();
});

我建议：

// selects all <ul> elements, then filters the collection:
$('ul').filter(function () {
  // we keep only those elements with no child-elements
  // (note 'children' not 'childNodes'):
  return this.children.length === 0;
// we then remove those retained <ul> elements:
}).remove();

ul {
  border: 2px solid #f00;
  margin: 0 0 0.5em 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul></ul>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<ul></ul>

参考文献：

CCD_ 2
remove()

下面将删除不包含任何li元素的任何ul元素

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

还请注意，您在循环中生成了重复的ID，这是无效的html。