如何删除没有某个父元素的元素?

时间:2014-04-09 18:49:30

标签: javascript jquery

我想删除没有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作为父项。所以应删除它们。

3 个答案:

答案 0 :(得分:13)

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

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

答案 1 :(得分:3)

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

或者

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

答案 2 :(得分:0)

这里我只使用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