Home/ Questions/Q 7782659
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T19:36:39+00:00

Let’s assume i have HTML markup like this: <body> <div id=content> <div id=sidebar> </div>

  • 0

Let’s assume i have HTML markup like this:

<body>
  <div id="content">
    <div id="sidebar">
    </div>
    <div id="main">
        <p class="foo">text</p>
        <p class="bar">more <span>text</span></p>
    </div>
  </div>
</body>

Let’s further assume that i selected some of them in an array of DOM elements:

var allElements = jQuery('div,p').get();
// result: [div#content, div#sidebar, div#main, p.foo, p.bar]

Now i want to efficiently remove all elements from the result set which have a child in the result. In other words, only the deepest level should remain. So, the desired result would be:

var deepestElements = doSomethingWith(allElements);
// desired result: [div#sidebar, p.foo, p.bar]

How can i do this?

By the way: “Deepest elements” seems to be the wrong term for what i am trying to do. Is there any better name?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I found a working solution (JQuery distinct descendants (filter out all parents in result set)).

    Code credits to cfedermann:

    jQuery.fn.distinctDescendants = function() {
    var nodes = [];
    var parents = [];

    // First, copy over all matched elements to nodes.
    jQuery(this).each(function(index, Element) {
        nodes.push(Element);
    });

    // Then, for each of these nodes, check if it is parent to some element.
    for (var i=0; i<nodes.length; i++) {
        var node_to_check = nodes[i];
        jQuery(this).each(function(index, Element) {

            // Skip self comparisons.
            if (Element == node_to_check) {
                return;
            }

            // Use .tagName to allow .find() to work properly.
            if((jQuery(node_to_check).find(Element.tagName).length > 0)) {
                if (parents.indexOf(node_to_check) < 0) {
                    parents.push(node_to_check);
                }
            }
        });
    }

    // Finally, construct the result.
    var result = [];
    for (var i=0; i<nodes.length; i++) {
        var node_to_check = nodes[i];
        if (parents.indexOf(node_to_check) < 0) {
            result.push(node_to_check);
        }
    }

    return result;
};
    • 0