Question

Within multiple sections (accordion), I have a combination of paragraphs and unordered lists (dynamically generated).

What I’m trying to achieve is to remove the empty tags/one or the other, or both if empty. If both ‘p’ and ‘ul’ elements are empty remove its parent ‘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

Iterate over each section and get the elements you are interested in. Then filter them to get only the empty ones. If both sets have the same size, they are all empty and you can delete the corresponding section. If not, only remove the empty elements.

$('.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