JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">
    <h1>Parent</h1>
    <div class="child">
        <p>Child 1.1</p>
        <div class="trash">
            <p>Trash</p>
        </div>
        <div class="child">
            <p>Child 2.1</p>
            <div class="trash">
                <p>Trash</p>
                <div class="child">
                    <p>Child 3.1</p>
                    <div class="child">
                        <p>Child 4.1</p>
                    </div>
                    <div class="trash">
                        <p>Trash</p>
                        <div class="child">
                            <p>Child 4.2</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="child">
                <p>Child 3.2</p>
                <div class="child">
                    <p>Child 4.3</p>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

#parent,
#parent div{
    padding: 10px;
    padding-left: 30px;
}

.trash{ background-color: cyan; }

JavaScript

(function($){
    $.fn.findAtDepth = function(selector, depth){
        var children = $();
        $(selector, $(this)).each(function(index, child){
            if($(child).parentsUntil($(this), selector).length == (depth - 1)){
                children = $(children).add($(child));
            }
        });
        return children;
    };
})(jQuery);

$(document).ready(function(){
    $('#parent').css({ 'background-color': 'red' })
    $('#parent').findAtDepth('.child', 1).css({ 'background-color': 'green' });
    $('#parent').findAtDepth('.child', 2).css({ 'background-color': 'blue' });
    $('#parent').findAtDepth('.child', 3).css({ 'background-color': 'yellow' });
    $('#parent').findAtDepth('.child', 4).css({ 'background-color': 'magenta' });
});