Is there a way to conceal the parent element when the child element is hidden from view?

Wanting to remove the stars badge in the review section of a Shopify store when there are 0 reviews for the product. The goal is to have the badge appear automatically once a review is received. Here's the code snippet:

HTML

 <div class="spr-badge-container">
    <span class="stamped-product-reviews-badge stamped-main-badge" data-id="{{ product.id }}" data-product-sku="{{ product.handle }}" data-product-type="{{product.type}}" data-product-title="{{product.title}}"  style="display: inline-block;">{{ product.metafields.stamped.badge }}</span>
 </div>


CSS

.stamped-container[data-count="0"][data-version="2"] { 
display:none !important; 
}

The above CSS hides the star ratings inside the "spr-badge-container". My aim is to hide the entire "spr-badge-container" DIV if the enclosed SPAN element is hidden.

I've attempted different approaches without success. Any suggestions or an easier solution would be greatly appreciated.

Thank you, J

P.S. This is the HTML rendered by the browser:

HTML for review stars section

<div class="spr-badge-container review-margin-cust">
 ... (omitted for brevity) ...
</div>


HTML for main reviews section

<div class="stamped-container" data-count="0" data-widget-style="standard2" data-widget-language=""
    ... (omitted for brevity) ...
</div>

Additionally, here is the complete CSS for hiding these elements:

CSS

 #stamped-main-widget .stamped-container[data-count="0"] { display: none !important; }
     .stamped-container[data-count="0"][data-version="2"] { display:none !important; }
htmljquerycssshopifyliquid

Answer №1

Based on your explanation, one possible solution is to initially hide all elements with the class .spr-badge-container and then show them if there is a value on page load.

CSS:

.spr-badge-container{ display: none;}

JS:

window.onload = ()=>{
 if(jQuery('.stamped-container').data('count') != '0' ){
   $(".spr-badge-container").css('display', 'block');
   // use CSS or show to display the container
   $(".spr-badge-container").show();
 }
}

Please note that the JavaScript code requires jQuery to function properly, so make sure to load the jQuery library before including this code.

Answer №2

Just wanted to express my gratitude for the solution provided, it worked like a charm! Made a few adjustments to tailor it perfectly for my needs.

CSS

    .spr-badge-container {
        display: none;
    }

    #stamped-main-widget .stamped-container[data-count="0"] {
        display: none !important;
    }

JS

    window.onload = () => {
        if (jQuery('.stamped-container').data('count') != '0') {
            $(".spr-badge-container").css('display', 'block');
        }
    }

Thank you once again! This issue had me stumped for quite some time.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing jQuery show() and hide() methods for form validation

I created a form to collect user details and attempted to validate it using the jQuery hide and show method. However, I seem to be making a mistake as the required functionality is not working correctly. What am I missing? I have searched for solutions on ...

javascriptjquery

What methods can I implement to ensure a button illuminates only when correct information is provided?

I have developed a calculator for permutations and combinations. When either permutation or combination is selected, and the required values are entered, I want the calculate button to light up. How can I achieve this without using setInterval in my curren ...

javascripthtmlcssbuttoncalculator

Using CSS and JavaScript to create a gradient-style opacity effect for smoothly fading out content

Is there a way to achieve a gradient fade effect on the opacity of an iframe and its content? To provide an illustration, think of the bottom of the notification centre in Mountain Lion or iOS. The concept involves having the content within an iframe grad ...

cssiframescrollopacitygradient

Inject the variable into location.href

I am dealing with a dynamic URL, and I want to achieve the following in my HTML: <a onclick="location.href='myVariable';"><span>Click here</span></a> The issue is that this approach displays the actual string 'myVar ...

htmlangularjsvariableslocationhref

Express app unable to retrieve dropdown menu data using Node.js BodyParser

I am currently working on creating a pug file for a signup form and I'm encountering an issue with the drop-down menu not functioning. How can I properly include my drop-down menu in the body parser? I initially assumed it would be processed with json ...

htmlnode.jsexpress

Can a PHP script return headers after making an Ajax request?

Currently, I have a PHP script that can generate a .CSV export file from a MySQL database. The script formats the output and uses header() to open a pop-up window in the browser for the user to download the .CSV file - this has been tested and works proper ...

phpjqueryajaxhttp-headers

Tips on how to horizontally align an icon and text using Material UI

As a newcomer to Material UI, I am facing an issue where my icon and text are not aligned: What I'm aiming for: This is the code I have so far: <div style={{ display: 'inline-flex', VerticalAlign: 'text-bottom', Bo ...

htmlcssreactjsmaterial-ui

The elements being parsed are appearing as undefined

Currently, I am attempting to analyze this JSON structure: { "customers": [ { "name":"joe" , "cars":[ {"name":"honda","visits":[ {"date":"01/30/14","Id":"201"}, {"date":"01/30/14","Id":"201"}, {"date":"02/12/14","Id":"109"} ...

javascriptjqueryjsonparsing

The webpage is not displaying any results despite using .innerHTML with Ajax

I am currently developing a web application that displays query results using the Google Books API. While my code is functioning, I am encountering an issue where the .innerHTML method does not show any results on the HTML page. Below is the HTML code bein ...

javascripthtmlajax

Learn how to create a button that will only submit a value when clicked using Node.js and EJS

Currently in my ejs file, I have a button that sends a value to app.js instantly when the program runs. However, I want it to only submit the value when clicked by the user. <% notesArray.forEach((note,i) =>{ %> <div class="note"> ...

javascripthtmlnode.jsejs

The HTML slideshow is not automatically showing up as intended

I need to make a few adjustments to the picture slideshow on my website. Currently, all the pictures are displayed at once when you first visit the site, and it only turns into a slideshow when you click the scroll arrows. I want it to start as a slideshow ...

javascripthtml

Does setInterval run only once?

JSFiddle is here... http://jsfiddle.net/Vd8PJ/10/ Currently, I am attempting to create a JQuery carousel that can showcase images of varying widths. The goal is to achieve a seamless and infinite slide to the right on an unordered list containing these i ...

jqueryanimationcarouselsetinterval

Is it possible to trigger a script tag based on certain conditions using a JavaScript function?

I'm currently working with Angular and have a requirement to trigger a third party script from a function located within another script tag. Here's an example scenario: Within the index.html file let displayOnHomepage = () => { if (win ...

javascripthtmlangular

File input does not prompt the file browser on Android devices, limiting users to only the camera option

I created a basic web application where users can upload images. The frontend is built using HTML5 and some jQuery within a simple Ruby on Rails app. Everything functions smoothly, except for Android devices where only the Camera option is available when ...

androidjqueryruby-on-railswebview

Moving object sideways in 100px intervals

I'm struggling to solve this issue. Currently, I have multiple div elements (each containing some content) that I need to drag and drop horizontally. However, I specifically want them to move in increments of 100px (meaning the left position should b ...

javascripthtmlcssvue.js

Implementing AJAX to dynamically update information based on user's selection from a dropdown

I need to dynamically adjust the opacity of my graph bars without requiring the user to manually refresh the page. I'm considering using AJAX for this purpose. How can I implement this functionality? const opacitySlider = document.getEle ...

javascriptjqueryajax

CSS3 family tree tutorial: Incorporating a wife into the design

I came across a fascinating tutorial about creating a family tree using CSS3 only. However, I'm struggling to understand how to depict a marriage. To explain further: What the code currently accomplishes is this: what i aim to include is this: Alth ...

htmlcssfamily-tree

Issues within jQuery internal workings, implementing improved exception handling for fn.bind/fn.apply on draggable elements

I've been experimenting with wrapping JavaScript try/catch blocks as demonstrated on this link. It functions properly, essentially encapsulating code in a try/catch block to handle errors like so: $.handleErrors(function(e){ console.log("an erro ...

javascriptjqueryjquery-uijavascript-framework

What sets apart the <script> tag with a type attribute from the standard <script> tag in HTML?

Similar Question: Is it necessary to include type=“text/javascript” in SCRIPT tags? While working on my HTML project, I noticed that the JavaScript code within script tags is evaluated even if the type attribute is not explicitly set to "j ...

javascripthtml

The information overflow occurs outside the tooltip specifically in Chrome, while functioning perfectly in IE11

As a newcomer to the CSS world, I am experimenting with adding a block-level element (div) inside an anchor tag's :hover pseudo-class popup. The div element contains a table that needs to have dynamic sizing for both the table itself and its cells (wi ...

csstooltip