Удалить/ скрыть элементы js/jquery

Question

Имеется следующая разметка:

<div class="list">1234</div> 
<div class="list">2122</div>
<div class="list">9999</div> 
<div class="list">0000</div>
<div class="list">1235</div>
<div class="list">1111</div> 
<div class="list">9090</div> 
<div class="list">3333</div>
<div class="list">2222</div>

Мне надо удалить или скрыть элементы, которые не удовлетворяют числам массива, для этого я делаю следующее:

array = [1111,9090,3333,1235];
    document.querySelectorAll('.list').forEach(function(a){
    array.forEach(element => {
        if(element != a.firstElementChild.textContent){
            $(a).hide();
        }
    });
})

Но по итогу выводится только одно число 1235,если убрать else, то вообще ничего не выводит. Спасибо за помощь!

Answer 1

Используйте метод find() для проверки наличия указанного в элементе числа, если он вернет indefined, значит элемента в массиве нет, в этом случае нужно скрывать элемент

array=[1111,9090,3333,1235]

document.querySelectorAll(".list").forEach(function(a){ 
  if (!array.find(item => item == a.innerText)) {
    $(a).hide(); // если хотите удалить элемент, используйте метод remove()
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list">1234</div>
<div class="list">2122</div>
<div class="list">9999</div>
<div class="list">0000</div>
<div class="list">1235</div>
<div class="list">1111</div>
<div class="list">2222</div>
<div class="list">3333</div>

Answer 2

const arr = [1111, 9090, 3333, 1235];

$('.list').each(function() {
  if (!arr.find(item => item == this.textContent)) {
    $(this).hide();
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list">1234</div>
<div class="list">2122</div>
<div class="list">9999</div>
<div class="list">0000</div>
<div class="list">1235</div>
<div class="list">1111</div>
<div class="list">2222</div>
<div class="list">3333</div>

Если вы используете JQuery, я бы рекомендовал, тогда все манипуляции с деревом делать используя эту библиотеку.

Так же решение может быть написано на нативном JavaScript:

const arr = ['1111', '9090', '3333', '1235'];

document.querySelectorAll('.list').forEach(node => {
  if (!arr.find(item => item === node.textContent)) {
    node.style.display = 'none';
  }
})

https://api.jquery.com/each/

БЛОГ НА HUSL

Удалить/ скрыть элементы js/jquery

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