Скрыть/удалить из блока существующий элемент при появлении/добавлении нового

04 апреля 2021, 07:10

Имеем такие блоки. В подменю 2 Блок2 появляется новая строка, при ее появлении нужно убрать другую строку.

Когда появляется эта: <a class="hdhdhd" href=" " >HD каналы</a>
нужно скрыть эту: <a class=" tototo" href=" " >Торрент тв</a>,
причем в Блок1 <a class=" tototo" href=" " >Торрент тв</a> должна остаться.

Можно ли это проделать стилями, чем-нибудь вроде:

/* это не работает конечно  */
.men777 .hdhdhd + .tototo {
    display: none;
}

Или скриптами, например при наличии в class="men777" слова HD каналы, скрыть class=" tototo".

Имеется JavaScript:

$('.hdhdhd:contains("HD каналы")').parent().addClass("tototo")();

И соответствующий ему CSS стиль:

.tototo {
  display: none;
}

Но это не совсем то. Вот разметка:

<li> 
  <div class="bbb"><a class=" " href=" ">БЛОК 1</a> 
 
    <div class="oooa"> 
      <a class=" " href=" ">-------- поддменю 1 БЛОК 1</a> 
      <div class="men444"> 
        <a class=" " href=" ">Все каналы</a> <br> 
        <a class=" " href=" ">Развлекательные</a> <br> 
        <a class=" " href=" ">Популярные</a> <br> 
        <a class=" " href=" ">Новостные</a> <br> 
 
      </div> 
      <!--menuuuuuu--> 
 
      <a class=" " href=" ">-------- поддменю 2 БЛОК 1</a> 
      <div class="men777"> 
        <a class=" " href=" ">Спутниковые</a> <br> 
        <a class=" tototo" href=" ">Торрент тв</a> <br> 
 
      </div> 
      <!--menuuuuuu--> 
 
 
      <div class=" 555"></div> 
      <div class="rakana"></div> 
 
    </div> 
    <!--oooa--> 
    <div class="rakana222"></div> 
  </div> 
  <!--div bbb--> 
  <div class="content_left"> 
  </div> 
  <!--content_left--> 
</li> 
<!--li--> 
<li> 
  <div class="bbb"><a class=" " href=" ">БЛОК 2</a> 
 
    <div class="oooa"> 
      <a class=" " href=" ">-------- поддменю 1 БЛОК 2</a> 
      <div class="men444"> 
        <a class=" " href=" ">Все каналы</a> <br> 
        <a class=" " href=" ">Развлекательные</a> <br> 
        <a class=" " href=" ">Популярные</a> <br> 
        <a class=" " href=" ">Новостные</a> <br> 
 
      </div> 
      <!--menuuuuuu--> 
 
      <a class=" " href=" ">-------- поддменю 2 БЛОК 2</a> 
      <div class="men777"> 
        <a class=" " href=" ">Спутниковые</a> <br> 
        <a class="hdhdhd" href=" ">HD каналы</a> <br> 
        <a class=" tototo" href=" ">Торрент тв</a> <br> 
 
      </div> 
      <!--menuuuuuu--> 
 
 
      <div class=" 555"></div> 
      <div class="rakana"></div> 
 
    </div> 
    <!--oooa--> 
    <div class="rakana222"></div> 
  </div> 
  <!--div bbb--> 
  <div class="content_left"> 
  </div> 
  <!--content_left--> 
</li>

Answer 1

Код, который вы указали в описании, правильный.

.men777 .hdhdhd + .tototo {
   display: none;
 }

Но для того, чтобы он начал работать, вам нужно убрать <br> между элементами. Это связано с тем, что знак "+" выбирает элементы веб-страницы, у которых есть общий родитель и они находятся рядом друг с другом (т.е. являются соседними). А так как элементы с классами .hdhdhd и .tototo разделены тегом <br>, то они не являются соседними.