如何删除没有特定父元素的元素？

Question

我希望删除没有父级为 ul 的列表项。

这是我的 HTML：

<div class="yamm-content">
    <div class="row">
        <li> <a href="#">Should be deleted</a>

        </li>
        <li> <a href="#">Should be deleted</a>

        </li>
        <ul id="randomid" class="col-xs-12 col-sm-4">
            <li> <a href="#">menu item</a>

            </li>
            <li> <a href="#">menu item</a>

            </li>
            <li> <a href="#">menu item</a>

            </li>
        </ul>
        <ul id="randomid2" class="col-xs-12 col-sm-4">
            <li> <a href="#">menu item</a>

            </li>
            <li> <a href="#">menu item</a>

            </li>
            <li> <a href="#">menu item</a>

            </li>
        </ul>
    </div>
</div>

和我的当前脚本：

if (!$('.nav .yamm-content row li').closest('ul').length == 0) {
    $(this).remove();
}

jsFiddle

前两个列表项没有 ul 作为父级。因此应该删除它们。

- toast

---

你的HTML将无法验证...我想知道是谁的主意在没有<ul>父元素的情况下放置了<li>？这是怎么发生的？ - Roko C. Buljan

难道不应该是.row吗？ - Blazemonger

是的，应该这样做 - 我甚至没有看到，谢谢 @RokoC.Buljan，它是一个内容管理系统，它迫使我采取行动。 - toast

Answer 1

简单易懂: $('li:not(ul > li)').remove();

示例 http://jsfiddle.net/46NdQ/3/

- Arbel

---

你的代码实现了 OP 要求的功能，但是 OP 是否应该删除任何直接父级不是 UL 的 LI 呢？因为只有当 LI 具有 UL、OL 或 MENU 的直接父级时才是有效的 HTML。 - jfriend00

Answer 2

$('li').filter(function(){return !$(this).closest('ul').length}).remove();

或者

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

- Joe Frambach

Answer 3

这里我仅使用了Javascript，可能需要编写一些代码行。我建议在您不想使用jQuery时，这可能会有所帮助。

var len = document.getElementsByTagName('li').length;
for (var i=0;i<len;i++)
{
if (document.getElementsByTagName('li')[i].parentNode.nodeName != "UL")
{ 
 document.getElementsByTagName('li')[i].remove();
 i--;
}
}

这里是fiddle。

- htoniv