Как скрыть/удалить дочерний элемент через js?

Question

[Роберт Плант]

Суть такая: есть блок с блоками

<div class="list">
   <div class="line_2">
      <div class="title">1. Текст</div>
   </div>
   <div class="line_3">
      <div class="title">2. Текст 2</div>
   </div>
   <div class="line_2">
      <div class="title">1. Текст</div>
   </div>
   <div class="line_3">
      <div class="title">2. Текст 2</div>
   </div>
   <div class="line_2">
      <div class="title">1. Текст</div>
   </div>
   <div class="line_2">
      <div class="title">1. Текст</div>
   </div>
   <div class="line_2">
      <div class="title">1. Текст</div>
   </div>
   <div class="line_2">
      <div class="title">1. Текст</div>
   </div>
   <div class="line_2">
      <div class="title">1. Текст</div>
   </div>
   <div class="line_5">
      <div class="title">4. Текст 3</div>
   </div>
   <div class="line_5">
      <div class="title">4. Текст 3</div>
   </div>
</div>

Нужно оставить первое вхождение .title в блоках .line_2, .line_3, .line_4, а остальные скрыть или удалить.
На выходе должно получиться так:

<div class="list">
   <div class="line_2">
      <div class="title">1. Текст</div>
   </div>
   <div class="line_3">
      <div class="title">2. Текст 2</div>
   </div>
   <div class="line_2">
      
   </div>
   <div class="line_3">
      
   </div>
   <div class="line_2">
      
   </div>
   <div class="line_2">
      
   </div>
   <div class="line_2">
      
   </div>
   <div class="line_2">
      
   </div>
   <div class="line_2">
      
   </div>
   <div class="line_5">
      <div class="title">4. Текст 3</div>
   </div>
   <div class="line_5">
      
   </div>
</div>

Скрытие/удаление будет происходить сразу с загрузкой страницы, без кликов.
Блоки могут быть в разном порядке, поэтому :nth-child() тут не пойдет.

Comments

[Ankhena]

.list div:not(.line_2):not(.line_3):not(.line_4) .title:first-child

[Роберт Плант]

Ankhena, Спасибо за ответ! Но так выбираются все .title во всех блоках. Если сделать так:

.list div:not(.line_2):not(.line_3):not(.line_4) .title:first-child {display: none;}

то все .title скроются, а нужно оставить первые вхождения.

[Ankhena]

Роберт Плант, вообще-то нет, но вы правы, я забыла not у first-child для .title

[Роберт Плант]

Ankhena,

.list div:not(.line_2):not(.line_3):not(.line_4) .title:not(:first-child)

Так тоже не работает. Может я неправильно :not поставил? )

[Ankhena]

Роберт Плант, у вас не вполне четкая формулировка. И пример-результат тоже не сходится с запросом.

В начальном коде два блока line_5, а в результате в одном остается title, а в другом нет.
Почему?

Переформулируйте условие более четко и сделайте песочницу на jsfiddle.net (пожалуйста, не на кодепене, на нем логиниться нужно и сохраняются потом пены в свой акк, а я не хочу) и скрин нужного результата из неё.

[Роберт Плант]

Ankhena,

В начальном коде два блока line_5, а в результате в одном остается title, а в другом нет.
Почему?

Нужно оставить только первое вхождение, а остальные скрыть. Если на CSS, то установить для них display: none;

[Роберт Плант]

Ankhena, вот песочница
Дело в том, что блоки .line_ могут быть в разной последовательности. Поэтому, строгие значения :nth-child() (как сейчас в песочнице) не пойдут.

[Роберт Плант]

Ankhena, вот верная песочница

[Ankhena]

Роберт Плант, Почему один скрыт, а другой показывается, хотя оба этих тайтла первые и класс родителя у них одинаковый?

[Ankhena]

Роберт Плант, ладно, решение там вроде нашлось, а то я уже туплю, кажется сильно.

[Роберт Плант]

Ankhena, спасибо большое за участие! )

Answer 1

[Ragtime Kitty]

Типа вот так должно быть?

Comments

[Роберт Плант]

Да. Спасибо большое!

[Роберт Плант]

Еще вопрос. Как можно добиться такого же результата, если в .line_ будут еще блоки, например такие:

<div class="list">
   <div class="line_2">
      <div class="title">1. Текст</div>
      <div class="block">тут текст</div>
   </div>
   <div class="line_3">
      <div class="title">2. Текст 2</div>
      <div class="block">тут текст</div>
   </div>
   <div class="line_2">
      <div class="title">1. Текст</div>
      <div class="block">тут текст</div>
   </div>
   <div class="line_3">
      <div class="title">2. Текст 2</div>
      <div class="block">тут текст</div>
   </div>
   <div class="line_2">
      <div class="title">1. Текст</div>
      <div class="block">тут текст</div>
   </div>
   <div class="line_2">
      <div class="title">1. Текст</div>
      <div class="block">тут текст</div>
   </div>
   <div class="line_2">
      <div class="title">1. Текст</div>
      <div class="block">тут текст</div>
   </div>
   <div class="line_2">
      <div class="title">1. Текст</div>
      <div class="block">тут текст</div>
   </div>
   <div class="line_2">
      <div class="title">1. Текст</div>
      <div class="block">тут текст</div>
   </div>
   <div class="line_5">
      <div class="title">4. Текст 3</div>
      <div class="block">тут текст</div>
   </div>
   <div class="line_5">
      <div class="title">4. Текст 3</div>
      <div class="block">тут текст</div>
   </div>
</div>

[Ragtime Kitty]

Роберт Плант, Если я правильно поняла, то можно так. Вариантов много

[Роберт Плант]

Ragtime Kitty, Спасибо! А как можно только .title убрать, не убирая .block? Т.е. первое решение то, что нужно. Но оно не работает, если в .line_ есть несколько блоков.

[Ragtime Kitty]

Роберт Плант, уберите селектор * и поставьте те, которые нужно скрыть. А вообще сразу пишите, какой результат вам нужен и условия полностью, а не кусками.

[Роберт Плант]

Ragtime Kitty, то что нужно! Благодарю вас очень сильно! )