How to exclude an element from an array in JS?

Question

There is such a script

(function () { var spoilers = [].slice.call(document.querySelectorAll('.spoiler-wrap,.sp-wrap,.sp-head')); if (!spoilers.length) { return; } var btn = document.createElement('button'); btn.type = 'button'; btn.innerHTML = 'Открыть все спойлеры'; btn.addEventListener('click', function () { spoilers.forEach(function (node) { node.querySelector('.clickable').dispatchEvent(new Event('click')); }); }); spoilers[0].insertAdjacentHTML('beforebegin', '<br>'); spoilers[0].insertAdjacentHTML('beforebegin', '&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp'); spoilers[0].parentNode.insertBefore(btn, spoilers[0]); })();

opening all the spoilers on the page. Is it possible to make everything open except for those (there are two) that do not need to be opened?

Marking not needed:

 td.row1 table[id^="post_"] style+table.btTbl div.center .spoiler-wrap

The necessary spoilers have this markup.

 tr.row2 td.row2 table[id^="post_"] div.postbody .spoiler-wrap

The full version of unnecessary spoilers "List of files in the torrent" and "Related topics" Full version

Marking unnecessary spoilers in the original

 <div align="center"> <div class="spoiler-wrap" style="width: 95%; margin: 6px auto; clear: both; border: solid #6699CC; background: #D0DFEF; border-width: 1px 1px 1px 2px;" onmousedown="var d=document.getElementById('contentdiv');if(!d.flDone){ajax_do('filelst.php?attach_id=757422');}" align="center"> <div class="spoiler-head folded clickable">Список файлов в торренте</div> <div class="spoiler-body" id="contentdiv" style="border-top:1px solid #6699CC; background: #F4F8FB; padding: 1px 6px 2px; display: none;overflow:auto;max-height:350px;" title="">&nbsp;</div> <div class="clear"></div> </div> </div> <div id="simil"></div> <div align="center"> <div class="spoiler-wrap" style="width: 95%; margin: 6px auto; clear: both; border: solid #6699CC; background: #D0DFEF; border-width: 1px 1px 1px 2px; font-weight: bold;" align="center"> <div class="spoiler-head folded clickable">Похожие темы (2992 совп.; «k, авторск, раздач»):</div> <div class="sim spoiler-body" style="border-top:1px solid #6699CC; background: #F4F8FB; padding: 1px 6px 2px; display: none;" title="">

Apparently you need to add a condition in spoilers.forEach , but it’s not clear which one, since you didn’t bring this condition.
Is it possible to make everything open except for those (there are two) that do not need to be opened?
@GreatureTy, you just need to check that the current element is not one of those.
If it is not difficult, then describe how to make this check?

Grundy grundy 58.6k 7 49 93 · Answer 1 · 2018-10-05T11:10:02

A simple solution, just do not add unnecessary elements to the sample.

For example, expanding the selector: document.querySelectorAll('div.postbody .spoiler-wrap,.sp-wrap,.sp-head')

In this case, unnecessary items will not be in the collection.

An alternative solution is to check the parent directly in the loop.

The parent element can be obtained using the parentNode property.

Thus, you only need to call the click to have the parent not the center class. You can check this by calling the contains method on the classList property

 spoilers.forEach(function (node) { if(node.parentNode.classList.contains('center')) return; node.querySelector('.clickable').dispatchEvent(new Event('click')); });

In the class center will not give a ride, as well as necessary and unnecessary have it.
And where to insert an advanced selector (I apologize for the question)?
@ BlagoRotishina, where you get the list var spoilers = [].slice.call(...

How to exclude an element from an array in JS?

1 answer 1

More articles: