Скрытие кнопок в зависимости от количества элементов в списках

Question

Что нужно поправить в коде, чтобы когда элементов в списке больше двух - кнопки в этих блоках исчезали?

let btns = document.querySelectorAll('.btn');
let elements = document.querySelectorAll('.list li');
let list = document.querySelectorAll('.list');

btns.forEach((item) => {
  item.addEventListener('click', (el) => {
    el.target.closest('.div').classList.toggle('active');
  });
  
  list.forEach((i) => {
    if (i.length > 2) {
      item.target.closest('.div').classList.add('hide');
    }
  })
});

.container {
  display: flex;
}

.div {
  margin: 2px;
  display: block;
  height: 200px;
  width: 150px;
  border: 1px solid black;
  background: green;
}

.span {
  margin: 0 0 10px 0;
  display: flex;
  height: 15px; width: 35px;
  background: blue;
}
.active .span {
  background: orange;
}

.span2 {
  margin: 10px 0 0 0;
  display: flex;
  height: 15px; width: 35px;
  background: purple;
}
.active .span2 {
  background: red;
}

.hide .btn {
  display: none;
}

```
<div class="container">
  <div class="div">
    <ul class="list">
      <li>1</li>
      <li>2</li>
    </ul>
    <span class="span"></span>
    <button class="btn">Button</button>
    <span class="span2"></span>
  </div>
  <div class="div">
    <ul class="list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <span class="span"></span>
    <button class="btn">Button</button>
    <span class="span2"></span>
  </div>
  <div class="div">
    <ul class="list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <span class="span"></span>
    <button class="btn">Button</button>
    <span class="span2"></span>
  </div>
</div>

Answer 1

Думаю, что не стОит создавать дополнительный цикл для скрытия кнопок. Проще делать это в цикле, где назначается обработчик:

let btns = document.querySelectorAll('.btn');

btns.forEach((item) => {
  item.addEventListener('click', (el) => {
    el.target.closest('.div').classList.toggle('active');
  });
  let div = item.closest('.div');
  div.classList.toggle('hide', [...div.querySelectorAll('.list li')].length > 2);
});

.container { display: flex; }

.div {
  margin: 2px;
  display: block;
  height: 200px; width: 150px;
  border: 1px solid black;
  background: green;
}

.span {
  margin: 0 0 10px 0;
  display: flex;
  height: 15px; width: 35px;
  background: blue;
}
.active .span { background: orange; }

.span2 {
  margin: 10px 0 0 0;
  display: flex;
  height: 15px; width: 35px;
  background: purple;
}
.active .span2 { background: red; }

.hide .btn { display: none; }

<div class="container">
  <div class="div">
    <ul class="list">
      <li>1</li>
      <li>2</li>
    </ul>
    <span class="span"></span>
    <button class="btn">Button</button>
    <span class="span2"></span>
  </div>
  <div class="div">
    <ul class="list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <span class="span"></span>
    <button class="btn">Button</button>
    <span class="span2"></span>
  </div>
  <div class="div">
    <ul class="list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <span class="span"></span>
    <button class="btn">Button</button>
    <span class="span2"></span>
  </div>
  <div class="div">
    <ul class="list">
    </ul>
    <span class="span"></span>
    <button class="btn">Button</button>
    <span class="span2"></span>
  </div>
  <div class="div">
    <span class="span"></span>
    <button class="btn">Button</button>
    <span class="span2"></span>
  </div>
</div>

БЛОГ НА HUSL

Скрытие кнопок в зависимости от количества элементов в списках

Ответы (1 шт):