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

Ever since updating my jQuery version to 3.2.1, my ajax code seems to have stopped functioning properly

My program's ajax functionality was running smoothly with jquery version 1.7, but when I updated to version 3.3.1, the ajax part stopped working. I made sure to attach the ajax portion of my code after updating the jQuery version. In the PHP file, I s ...

javascriptjqueryajax

At what times do screen reader users utilize tabs?

Did you know that screen reader users often rely on specific keyboard shortcuts rather than tabs for navigating web pages? For example, in VoiceOver they may use CTRL + OPTION + Arrow Keys instead. This challenges the idea of optimizing for tabbable naviga ...

htmlaccessibilityscreen-readers

The multiple lines text box displays an input box

Having a simple issue here, I've set the value of an input text box, but when the page loads it is displaying in multiple lines, and this seems to be happening only on Chrome browser. Can anyone offer any assistance? This is the HTML code for the ...

phphtmlcssinput

Testing for ajax failure using Q-Unit in a unit test

While utilizing jQuery's $.when method to manage ajax callbacks, I am also implementing mockjax for simulating various responses in my unit tests. One of these responses results in a status error of 500. Unfortunately, when catching this error using Q ...

jqueryajaxunit-testingqunit

What could be the issue with trying to bind an event handler in this manner?

I'm having some trouble binding an event handler with jQuery: $(document).ready(function () { var newsScrollerForPage = new NewsScroller(); newsScrollerForPage.init(); $('#scroller-left-a').bind('on ...

javascriptjquery

I am interested in creating a design where two DIVs are layered on top of each other with one having transparency, allowing visibility through to the background DIV. This can be achieved using a combination of

Looking to enhance the visual appeal of my website, I decided to incorporate a background image within a div. To add more depth and creativity, I am now striving to overlay a semi-transparent black box on top of the image. This overlay will not only allo ...

htmlcss

Implementing a Responsive Form on an Image Using Bootstrap

I am facing a challenge where I need to position a form on top of a Responsive Image. My goal is to ensure that the form is responsive as well and adjusts its size according to the image. As of now, the image is responsive but I am struggling to make the ...

htmlcssformstwitter-bootstrap

What does the underscore before a function in JavaScript or PHP signify?

I am curious about the significance of the underscore symbol (_) when it is placed before a function or variable. Does it serve to simply describe something, or is it required for executing specific functions or calling certain methods? In JavaScript: va ...

javascriptphpjquery

Bizarre display of miscellaneous items on the monitor

Hey there, I've been working on creating a div to display information about both the Civilian and Vehicle that users input. Initially, everything worked perfectly with my HTML and CSS until I introduced two additional divs into the layout. With just o ...

htmlcss

Is Jquery compatible with your Wordpress theme?

My current wordpress version is 3.4.1 and I want to include jQuery in my custom wordpress theme. Despite trying multiple solutions found online, I have been unsuccessful in implementing it convincingly. Can someone please provide a simple example to help ...

phpjavascriptjquerywordpress

Unable to activate tr:hover override feature in Dash app

Although I am new to Dash, I am well-versed in Python, HTML, and CSS. I have a simple structure that displays a DataTable. Here is the code snippet: def render_datatable(df=None, id=None): dt1= dash_table.DataTable( id=id, columns=[{&q ...

cssplotly-dash

The AJAX navigation feature does not function properly on Windows or Safari browsers, whether on a Mac or PC

Currently, I am facing an issue with a menu that is loaded via jQuery but maintained in a separate html file. The purpose of keeping it separate is to update it in one place rather than having to make changes on every page. The menu was functioning properl ...

jqueryhtmlajaxmenu

Top method for tracking changes in numerous textboxes

I'm currently working on a form that is organized into tabs using jQuery. Each tab contains different elements of the form related to a specific section, with a save button at the bottom of each tab. I want to implement a feature where a warning icon ...

jqueryhtmlcssinputtabs

Jquery deactivates the CSS hover effect

Having a dilemma with linked photos on my website. I have set their opacity to 0.45 by default, but want them to change to full opacity (1) when hovered over or clicked. I've implemented a JQuery function that resets the rest of the photos back to 0.4 ...

javascriptjqueryhtmlcss

The copyright (©) symbol is unresponsive to rotation

Why can't I rotate the © character? Am I missing something? .copy { font-size: 12px; font-family: Arial; writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); } <span class="copy">&copy; This is not ...

htmlcss

Specifically on Windows XP, Firefox fails to retrieve JSON data

Using jquery .ajax() for sending and receiving data through JSON works smoothly on all browsers, except for "Windows XP" Firefox. The .ajax() function sends data without any errors, and there are no error messages returned from JSON either. I suspect the ...

jqueryajaxjsonfirefoxwindows-xp

Dimension of images within bootstrap column division

I have a layout with three columns using col-md-4 for a thumbnail design, and then I have another page with col-md-8. In both cases, I need to display an image. Should I use the same image for both layouts or would it be best to have two separate images, e ...

htmlcsstwitter-bootstrap

JQUERY inArray failing to find a match

I'm at my wit's end working with inArray and I'm really hoping for some help. I am using AJAX to fetch userIDs from my database, which come through as a JSON-encoded array. However, no matter what I try, I always get a -1 when trying to mat ...

javascriptjqueryarraysjson

Specialized hover mission

Do you have a question? Imagine you have 3 spans where the default color is black. When you hover over a span, its color changes to red. But what if I told you that at the start, the first span has an orange color. Now, I want to hover over the orange on ...

javascripthtmlcsshover

Leveraging the power of javascript to include content before and after

I am looking to understand how I can insert an HTML element before and after certain elements. For example, let's say we have the following code in a real file: <ul class="abcd" id="abcd></ul> How can I display it like this using JavaScr ...

javascriptphphtmlreplace