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

Question

[Stacy None]

У меня есть меню на ul
Пример:

<ul class="menu">
<li><a href="/">Пункт 1</a> <span class="toggle-right"></span></li>
      <ul class="submenu">
           <li><a href="/">Пункт 2</a> <span class="toggle-right"></span></li>
           <li><a href="/">Пункт 2</a> <span class="toggle-right"></span></li>
      </ul>
</ul>
<li><a href="/">Пункт 2</a> <span class="toggle-right"></span></li>
<li><a href="/">Пункт 3</a> <span class="toggle-right"></span></li>
</ul>

Проблема в следующем:
span toggle - это кнопка которая открывает подменю submenu
Так как меню и пункты генерируются движком сайта, я не могу его править.
Нужен js код который отображал бы span только в пунктах где под li есть ul submenu т.е у пунктов где есть это самое ul submenu
Заранее спасибо!

Comments

[0xD34F]

меню и пункты генерируются движком сайта, я не могу его править

А надо. Или типа это нормально, что дочерним элементом ul является другой ul?

Answer 1

[Антон Швец]

const allSpans = document.querySelectorAll('ul.menu > span');
allSpans.forEach(span => span.classList.add('hidden'));
const spans = document.querySelectorAll('ul.menu > li ul.submenu li span');
spans.forEach(span => span.classList.remove('hidden'));

.hidden {
  display: none
}

Comments

[Stacy None]

Что-то не то, даже atom редактор когда я вставляю код подчеркивает его что он неправильный

[Антон Швец]

Stacy None, обновил. ну тут, блин, не IDE, писать неудобно.
Для таких вопросов код надо на jsfiddle или codepen выкладывать.
Тогда и сразу понятнее будет, что нужно.

[Stacy None]

Антон, Всё равно не то, либо я не понимаю как его подключить)
Вот, залил на codepen ТЫК

[Stacy None]

решил спс

[rusabk]

Stacy None, а зачем тут jquery? https://codepen.io/LordRussel/pen/wZKNGV