Как выбрать элементы, которые не имеют определенного элемента предка

Question

Посмотрите на этот пример:

<div id="root" class="box">
    <div class="box">
        <input letter="A"></input>
        <input letter="B"></input>
    </div>
    <div id="subroot" class="box">
        <div class="useless_class">
            <input letter="B"></input>
            <div class="useless_class">
                <input letter="D"></input>
            </div>
            <div class="box">
                <input letter="F"></input>
            </div>
        </div>
    </div>
    <input letter="E"></input>
</div>

Мне нужен селектор jQuery для ввода, у которого нет элемента-предка с классом .box.

Это желаемый результат:

input:
    searchInputsInElement($("#root"))
output:
    <input letter="E"></input>

input:
    searchInputsInElement($("#subroot"))
output:
    <input letter="B"></input>
    <input letter="D"></input>

Конечная цель - вызвать theSuperFunction рекурсивно.

################################################## #############################
# Решено ################################################ ######################
################################################## #############################

Благодаря @Shubanker, я сделал этот окончательный код (посмотрите на результат console.log).

Answer 1

Вы можете использовать JQuery filter () для фильтрации по вашему желаемому результату и parentUntil () для поиска родителя с классом 'box' в селекторе.

function theSuprFunction($selector){
   return $selector.find('input').filter(function(){
       return $(this).parentsUntil($selector,'.box').length===0 
   });
}

Также вы можете использовать .filter() с .parent() и hasClass

theSuprFunction($('#root'));

function theSuprFunction($selector){
   $selector.find('input').filter(function(){
       return !$(this).not($selector.find('> input')).parent().hasClass('box');
   }).css('background' , 'red');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="root" class="box">
    <div class="box">
        <input value="A" letter="A"/>
        <input value="B" letter="B"/>
    </div>
    <div id="subroot" class="box">
        <div class="useless_class">
            <input value="B" letter="B"/>
            <div class="useless_class">
                <input value="D" letter="D"/>
            </div>
            <div class="box">
                <input value="F" letter="F"/>
            </div>
        </div>
    </div>
    <input value="E" letter="E"/>
</div>

Примечание: .not($selector.find('> input')) извлечет вход #root, пока он имеет .box класс