Question

在多个部分（手风琴）中，我有段落和无序列表的组合（动态生成）。

我想要实现的是删除空标签/一个或另一个，或两者都是空的。如果'p'和'ul'元素都为空，则删除其父'section'。

<section>
    <span>-</span>
    <h3>(a)Heading</h3>
    <div class="acc-box" style="display: block;">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <ul></ul>
    </div>
</section>
<section>
    <span>-</span>
    <h3>(b)Heading</h3>
    <div class="acc-box" style="display: block;">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <ul>
            <li><a href="#" target="new.window">link</a></li>
            <li><a href="#" target="new.window">link</a></li>
            <li><a href="#" target="new.window">link</a></li>
            <li><a href="#" target="new.window">link</a></li>
        </ul>
    </div>
</section>
<section>
<span>-</span>
<h3>(d)Heading</h3>
<div class="acc-box" style="display: block;">
    <p>text here</p>
    <ul></ul>
</div>

Answer 1

迭代每个部分并获取您感兴趣的元素。然后过滤它们以仅获取空的元素。如果两个集合具有相同的大小，则它们都是空的，您可以删除相应的部分。如果没有，只删除空元素。

$('.acc-box').each(function() {
    var $elements = $(this).children('p, ul'), // get all intersting elements
        $empty = $elements.filter(function() { // get empty ones
             return $.trim($(this).text()) === "";
        });

    if($empty.length === $elements.length) { // all are empty
        $(this).closest('section').remove(); // remove section
    }
    else {                                   // otherwise
        $empty.remove();                     // remove empty elements
    }
});

DEMO

Answer 2

嘿，你可以试试这个：http://jsfiddle.net/qjyzc/

你也可以为li做同样的事情。

希望这有帮助，知道我是否遗漏了任何东西，

<强>码

$('p')
    .filter(function() {
        return $.trim($(this).text()) === ''
    })
    .remove()

删除节中的空元素组合

2 个答案: