Select and style all divs that have specific child element(span)

Question

I need to select and give "display: none" to all articles that have span with class .span-target in them. Here I will provide you an example.

I try with remove = document.querySelectorAll(''); but I only been able to select them and have no idea how to add them display: none or somehow remove them.

Please note that jQuery is not an option

Thank you in advace.

Example here:

<article class="class-1">
  <div class="class-2">
    <span class="class-3">Example 1</span>
    <div class="class-4 class-41 class-42">
      <div class="class-5 class-51 class-52">
        <div class="class-6 class-61 class-62 class-63">
          <div class="class-7 class-71 class-72 class-73">
            <div class="class-8 class-81 class-82 class-83">
              <span class="span-1">
                <time class="span-2">Sep 26</time>
                <span class="span-3"></span>
                <span class="span-4"></span>
                <span class="span-target">
                  Please leave
                  <span class="span-5">
                  </span>
                </span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</article>

Possible duplicate of [Hide all elements with class using plain Javascript](https://stackoverflow.com/questions/4644673/hide-all-elements-with-class-using-plain-javascript) — J M, Oct 08 '18 at 09:28
Loop over the articles, call `querySelectorAll` again on the individual article element to find out whether it has such a child (check the length of the returned node list), and if so, add a class or set `display:none` … — misorude, Oct 08 '18 at 09:29

score 3 · Accepted Answer · answered Oct 08 '18 at 09:28

You can iterate over the selected elements and add style to them

Array.from(
  document.querySelectorAll('article')
).forEach(el => {
    let shouldHide = el.querySelectorAll('.span-target').length;
    if (shouldHide) {
        el.style.display = "none";
    }
});

score 1 · Answer 2 · answered Oct 08 '18 at 09:30

Try below code snippet.

var remove = document.querySelectorAll('*[class^="span-"]');

for (var i = 0; i < remove.length; ++i) {
   remove[i].classList.add('hide');
}

.hide {
   display: none;
}

<article class="class-1">
    <div class="class-2">
        <span class="class-3">Example 1</span>

        <div class="class-4 class-41 class-42">
            <div class="class-5 class-51 class-52">
                <div class="class-6 class-61 class-62 class-63">
                    <div class="class-7 class-71 class-72 class-73">

                        <div class="class-8 class-81 class-82 class-83">
                            <span class="span-1">
                            <time class="span-2">Sep 26</time>
                            <span class="span-3"></span>
                            <span class="span-4"></span>
                            <span class="span-target">Please leave
                            <span class="span-5">
                            </span></span></span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</article>

score 0 · Answer 3 · answered Oct 08 '18 at 09:29

You just need to loop through the elements list and update their css property : -

Getting Elements :

var elements = document.getElementsByClassName("span-target");

Looping

for (let ele of elements) {

Updating their css properties

  ele.style.display = "none";

Here is the working code :

var elements = document.getElementsByClassName("span-target");
for (let ele of elements) {
  ele.style.display = "none";
}

<article class="class-1">
    <div class="class-2">
        <span class="class-3">Example 1</span>

        <div class="class-4 class-41 class-42">
            <div class="class-5 class-51 class-52">
                <div class="class-6 class-61 class-62 class-63">
                    <div class="class-7 class-71 class-72 class-73">

                        <div class="class-8 class-81 class-82 class-83">
                            <span class="span-1">
                            <time class="span-2">Sep 26</time>
                            <span class="span-3"></span>
                            <span class="span-4"></span>
                            <span class="span-target">Please leave
                            <span class="span-5">
                            </span></span></span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</article>

he want to hide article , not only span.this code is not working correct — hossein ketabi, Oct 08 '18 at 09:36

score 0 · Answer 4 · answered Oct 08 '18 at 09:32

This function should do what you are asking for. If you want to remove the article, you can do articles[i].remove() instead setting display:none

function hideUnwantedArticles() {
  var articles = document.getElementsByClassName('class-1');
  for(var i = 0; i < articles.length; i++) {
    var spans = articles[i].getElementsByClassName('span-target');
    if(spans.length > 0) articles[i].style = 'display:none;';
  }
}

hideUnwantedArticles();

<article class="class-1">
    <div class="class-2">
        <span class="class-3">Example 1</span>

        <div class="class-4 class-41 class-42">
            <div class="class-5 class-51 class-52">
                <div class="class-6 class-61 class-62 class-63">
                    <div class="class-7 class-71 class-72 class-73">

                        <div class="class-8 class-81 class-82 class-83">
                            <span class="span-1">
                            <time class="span-2">Sep 26</time>
                            <span class="span-3"></span>
                            <span class="span-4"></span>
                            <span class="span-target">Please leave
                            <span class="span-5">
                            </span></span></span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</article>

<article class="class-1">
    <div class="class-2">
        <span class="class-3">Example 1</span>

        <div class="class-4 class-41 class-42">
            <div class="class-5 class-51 class-52">
                <div class="class-6 class-61 class-62 class-63">
                    <div class="class-7 class-71 class-72 class-73">

                        <div class="class-8 class-81 class-82 class-83">
                            <span class="span-1">
                            <time class="span-2">Sep 27</time>
                            <span class="span-3"></span>
                            <span class="span-4"></span>
                            <span class="span-5">
                            </span></span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</article>

XiaoGuaiShow · Answer 5 · 2018-10-08T09:31:28.253

var ele = document.querySelectorAll('article span.span-target');
for(var i=0;i<ele.length;i++){
  ele[i].style.display="none"
}

<article class="class-1">
    <div class="class-2">
        <span class="class-3">Example 1</span>

        <div class="class-4 class-41 class-42">
            <div class="class-5 class-51 class-52">
                <div class="class-6 class-61 class-62 class-63">
                    <div class="class-7 class-71 class-72 class-73">

                        <div class="class-8 class-81 class-82 class-83">
                            <span class="span-1">
                            <time class="span-2">Sep 26</time>
                            <span class="span-3"></span>
                            <span class="span-4"></span>
                            <span class="span-target">Please leave
                            <span class="span-5">
                            </span></span></span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</article>

he specifically said jQuery is not an option. – Wondering Coder Oct 08 '18 at 09:27 — Wondering Coder, Oct 08 '18 at 09:27

Select and style all divs that have specific child element(span)

5 Answers5