1

Есть несколько блоков класса pinRow

В этих блоках всегда есть текст в первом абзаце. Но, в зависимости от фильтрации, не всегда есть информация во втором.

Задача: скрыть блоки, в которых нет текста во втором абзаце.

Нужно писать на JS без jQuery, вот скрипт который написал :

document.getElementsByClassName("pinRow").forEach(function() {
  if (document.getElementsByClassName("display")[0].textContent == "") {
    document.getElementsByClassName("pinRow")[0].style.display = "none";
  }
});
<div class="pinInfo">
  <div class="pinRow">
    <p><b>Представительство</b>:</p>
    <p class="display">Представительство</p>
  </div>
  <div class="pinRow">
    <p><b>Адрес</b>:</p>
    <p class="display">Адрес</p>
  </div>
  <div class="pinRow">
    <p><b>Должность</b>:</p>
    <p class="display"></p>
  </div>
  <div class="pinRow">
    <p><b>Телефон</b>:</p>
    <p class="display">Телефон</p>
  </div>
</div>

Моя крякозябра не работает, посоветуйте плз как можно это сделать

3 ответа 3

1

const pinRow = document.getElementsByClassName("pinRow");

for(let i = 0; i < pinRow.length; i++ ) {
  if(pinRow[i].querySelector('.display').textContent == '') {
    pinRow[i].style.display = 'none';
  }
}
<div class="pinInfo">
<div class="pinRow"><p><b>Представительство</b>:</p>
            <p class="display">Представительство</p>        
</div>
<div class="pinRow"><p><b>Адрес</b>:</p>
            <p class="display">Адрес</p>        
</div>
<div class="pinRow"><p><b>Должность</b>:</p>
            <p class="display"></p>     
</div>
<div class="pinRow"><p><b>Телефон</b>:</p>
            <p class="display">Телефон</p>      
</div>
</div>

1

Вот пример с forEach

[...document.getElementsByClassName('pinRow')].forEach(s => {
  if (s.querySelector('.display').textContent == '') {
    s.style.display = 'none';
  }
});
<div class="pinInfo">
  <div class="pinRow">
    <p><b>Представительство</b>:</p>
    <p class="display">Представительство</p>
  </div>
  <div class="pinRow">
    <p><b>Адрес</b>:</p>
    <p class="display">Адрес</p>
  </div>
  <div class="pinRow">
    <p><b>Должность</b>:</p>
    <p class="display"></p>
  </div>
  <div class="pinRow">
    <p><b>Телефон</b>:</p>
    <p class="display">Телефон</p>
  </div>

8
  • А можно немного детальнее, как это через for сделать) а то я немного "Нуб, л*х , нет друзей". Спасибо)
    – Gir_666
    10 апр 2019 в 14:04
  • Почему нельзя использовать forEach? Очень даже можно...
    – Air
    12 апр 2019 в 3:32
  • @Air перебери getElementsByClassName с forEach и расскажи, что получится. 12 апр 2019 в 4:35
  • Глянь свой ответ. Я тебе даже плюс поставлю...))) И убери комментарии
    – Air
    12 апр 2019 в 4:49
  • @Air И это жульничество. То, что ты делаешь, ([...someArray]) уже превращает содержимое в нормальный JS массив. А сам метод getElementsByClassName возвращает объект HTMLCollection, который не имеет метода forEach. Поэтому можешь обратно минусить, не важно, но комментарий я не удалю. У getElementsByClassName НЕТ метода forEach и это не JS массив. 12 апр 2019 в 4:55
0

Это работает =) :

const display = document.querySelectorAll('.display')
display.forEach((item) => {
    if (item.textContent == "") {
    item.parentNode.remove()
  }
})

querySelectorAll возвращает массив который можно перебрать через forEach. Далее мы проходим по каждому элементу с классом display и смотрим пустой ли он, если да - удаляем его родительский div.pinRow

1
  • 1
    кстати, используй remove() или display: none в зависимости от того насколько важно то что ты прячешь, ведь зайти в инспектор и открыть блок у которого display: none не составит труда продвинутому посетителю сайта) 10 апр 2019 в 14:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.