Как удалить все, кроме некоторых элементов DOM в jQuery?

#jquery

Вопрос:

Я хотел бы удалить все скрытые элементы в части DOM, но сохранить все (включенные скрытые элементы) под определенным классом.

Здесь у вас есть (нерабочий) пример:

 <div id="init">
    <input type="hidden" name="x" value="y" />
    <ul>
        <li>Hello</li>
        <li>Bye</li>
        <li class="block">
            <ol>
                <li>First</li>
                <li>Second</li>
                <li>Third</li>
            </ol>
        </li>
        <li>Test</li>
    </ul>
</div>

CSS: li { "display:none" }

Итак, я ищу селектор, который удаляет все скрытые элементы, кроме тех, которые имеют класс блока или находятся под классом блока. В этом случае ожидаемый результат:

 <div id="init">
    <ul>
        <li class="block">
            <ol>
                <li>First</li>
                <li>Second</li>
                <li>Third</li>
            </ol>
        </li>
    </ul>
</div>

Я играл с:not operator, но безуспешно.

1. Вы просто хотели бы проверить, имеет ли непосредственный родительский элемент определенный класс, или вам нужно перемещаться вверх по родительскому дереву?

2. Все поддерево должно оставаться нетронутым

Ответ №1:

Вы имеете в виду вот так?

 $(':hidden').not('.block, .block *').remove();

В качестве альтернативы:

 $(':hidden:not(.block, .block *)').remove();

Но $.fn.not() немного надежнее, чем :not()

1. Можно ли заменить $('div:not(:has(video))') на .not и .has ?

2. @IulianOnofrei, если у вас есть другой вопрос, пожалуйста, используйте кнопку «Задать вопрос» в верхней части страницы (при условии, что она соответствует рекомендациям SO).

Ответ №2:

На самом деле вы можете просто использовать CSS:

 li.block, li.block li { display: block }

Пример

Или более полный

 li.block, li.block>* * { display: block }