Hide Div Based on Great-grandchild javascript

Question

I am trying to hide a Div with class of faq-cat based on its great-grandchild has class of empty. If possible I would like to use a little javascript. I have provided a sample of the HTML.

<div class="faq-cat">
  <h3>Text</h3>
  <div class="vend-list">
    <div id="wpv-view-layout-275-TCPID281CTID23" class="js-wpv-view-layout">
      <div class="empty">No items found</div>
    </div>
  </div>
</div>

Hello. Welcome to StackOverflow. Please read [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) — Ionut Necula, Feb 08 '19 at 14:25
Possible duplicate of [Hide parent element with onclick function](https://stackoverflow.com/questions/17399897/hide-parent-element-with-onclick-function) — Ionut Necula, Feb 08 '19 at 14:27
Possible duplicate of [How to hide a parent div if an inner div has a certain class, with javascript](https://stackoverflow.com/questions/38318676/how-to-hide-a-parent-div-if-an-inner-div-has-a-certain-class-with-javascript) — Heretic Monkey, Feb 08 '19 at 14:32

score 0 · Answer 1 · answered Feb 08 '19 at 14:42

0

If you are using JQuery, then

$(".faq-cat").find($(".vend-list")).find($(".js-wpv-view-layout")).find($(".empty")).length

if length is 0, then element doesn't exist

answered Feb 08 '19 at 14:42

Prasann

1,263
2
11
18

sn3p · Answer 2 · 2019-02-08T15:32:42.983

Before answering I would like you to reconsider if you really need/want JavaScript to solve this. For example what happens if the user has JavaScript disabled? And the user will probably see FOUC while the page loads and the JavaScript is fired.

Are you using a framework? If you have control over how the template is generated you might want to prevent the content from being rendered instead of hiding it in the frontend, e.g. using server-side template logic:

<%= Enum.any? @cats do %>
  <div class="faq-cat">...</div>
<% end %>

(example using phoenix framework)

If you don't have any control over the template before it's served to the user, you could try something like this in JavaScript:

var fagCat = document.querySelector(".faq-cat");

if (fagCat.querySelector(".empty")) {
  fagCat.style.display = "none";
}

Below is a hidden empty faq-cat div:

<div class="faq-cat">
  <h3>Text</h3>
  <div class="vend-list">
    <div id="wpv-view-layout-275-TCPID281CTID23" class="js-wpv-view-layout">
      <div class="empty">No items found</div>
    </div>
  </div>
</div>

This is built using Wordpress and Toolset. The issue is that I am using two taxonomies and while the category may be empty under one taxonomy it is not empty under the other. So when it checks to see it it is empty it is not, but then there is still nothing to display. — Ian S, Feb 08 '19 at 19:50

dporechny · Accepted Answer · 2019-02-08T16:22:54.003

-1

So you can find all faq-cat elements on a page first. Then you select first one (works if you have only one of those on a page, if more you need to loop through the cats NodeList). Then you search for a child with empty class inside this faq-cat element, if at least one element with empty class is found - hide the faq-cat.

const cats = document.getElementsByClassName('faq-cat')
const cat = cats[0];
const empties = cat.getElementsByClassName('empty')
if (empties.length) cat.classList.add("hidden");

edited Feb 08 '19 at 16:22

answered Feb 08 '19 at 14:39

dporechny

638
5
12

Welcome to Stack Overflow. This answer is really only a partial answer, since it doesn't make it explicit how it can be integrated with the OP's code. It would also benefit from a description of how it is meant to solve the problem. – Stefan Feb 08 '19 at 16:13

Hide Div Based on Great-grandchild javascript

3 Answers3