Question

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

   <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并尝试一些功能，但仍然没有删除空UI。我该怎么做才能删除它们？这种观点是局部观点。

Answer 1

以下内容将删除所有不包含任何ul元素的li元素

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

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

Answer 2

我建议：

＆＃13;

// 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();

＆＃13;

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

＆＃13;

<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>

＆＃13;

参考文献：

filter()。
remove()。

Answer 3

试试这个......

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

Answer 4

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

如何使用js或jquery删除空ul

4 个答案: