Hide a div only if the child div of its sibling is empty

)

Is it possible to hide the text "Produktgrundpreis (falls vorhanden):" when the sibling child div is empty? View current site layout here

Here is the structure of the DOM: Structure

<div id="Produktgrundpreis-Text" class="brz-css-kfrku brz-css-iwlmt brz-wrapper">
  <div class="brz-rich-text brz-css-psnqi" data-custom-id="nvnuscfnezabbinlagscfvcigqzzhejoypkb">
    <div>
      <p class="brz-css-zpfqz" data-uniq-id="wuxnq" data-generated-css="brz-css-vtvig">
        <span class="brz-cp-color7">Produktgrundpreis (falls vorhanden):</span>
      </p>
    </div>
  </div>
</div>

<div id="Produktgrundpreis-Shortcode" class="brz-css-kfrku brz-css-eburp brz-wrapper">
  <div class="brz-wp-shortcode brz-css-fciet" data-custom-id="xfbqskiqkijowmwcilpwfpsdgetytiwoqvto">
    <div>
    </div>
  </div>
</div>

Being a beginner in JS, I attempted to write this code on my own:

function pgpVisibility() {
  var pgpShortcode = document.getElementById('Produktgrundpreis-Shortcode').innerText;
  
  console.log(pgpShortcode)

  if (pgpShortcode.includes('')) {
    document.getElementById('Produktgrundpreis-Text').style.display = "none";
  }
}

Since the content of Produktgrundpreis-Shortcode is empty, I assumed I could use .innerText to achieve this. What improvements can be made?

javascript

Answer №1

When dealing with an empty value (''), it is considered falsy, so you can implement a check for false values. Another option is to use the trim function if there may be spaces in the value.

function checkVisibility() {
  var elementValue = document.getElementById('elementID').innerText;
  // if (!elementValue.trim())
  if (!elementValue) {
      document.getElementById('displayText').style.display = "none";
  }
}

checkVisibility();

Answer №2

To determine the length of the "innerText", you can use the following code:

function checkInnerTextLength() {
  var innerTextLength = document.getElementById('inner-text-element').innerText.length;

if (innerTextLength < 1) {
    document.getElementById('display-element').style.display = "none";
  }
}
div {
  border: 1px solid;
  min-height: 10px;
}
<div id="display-element" class="custom-class">
  
<div class="inner-content">
  
  <div>
<p class="content-title">
<span class="text-highlight">Some Text Here:</span>
</p>
</div>
</div>
</div>

<div id="inner-text-element" class="shortcode-wrapper">
  
<div class="wp-shortcode content"><div>
</div>
</div>
</div>
<button onclick="checkInnerTextLength()">Check</button>

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

The Vuex store variable is being accessed prior to being populated with information retrieved from the API

I am currently attempting to retrieve data from an API using Vuex. Below is the action function in the Vuex store: async getEpisodeFromApi({ commit }, id) { const data = { id }; return await axios.get(Api.getUrl(data)).then((res ...

javascriptvue.jsvuex

Executing a request via ajax using a radio button

Here is the input that I am working with: <input id="offline-42" onclick="javascript:checkoutSwitch(false);controlDivPayment('42');" name="payment" type="radio" value="offline-42" /> I am attempting to use ajax to add a product to the sh ...

javascriptjqueryajax

Struggling to retrieve Codemirror textarea values across multiple elements with JavaScript/jQuery

I've been struggling to retrieve the values from my textarea codemirror in order to send them as JSON to the server for saving after editing. Unfortunately, I am unable to select the ELEMENT...I even attempted to grab the element by its id...with no s ...

javascriptjqueryhtmlcodemirror

Using target="_blank" does not seem to open a popup window in React

The issue is that the target="_blank" attribute is not working properly for the modal popup window. Instead, the link is opening in the same page and the popup is closing. <TermLink to="/legal/privacy-policy" target="_blank"> Privacy Pol ...

javascriptreactjs

Define certain variables within a single document that will have an impact on others

Is there a way for me to avoid having users open a lengthy script just to make simple text changes? I am considering using variables in my index.html document to modify content in my javascript file. For instance: // index.html <script type="text/j ...

javascriptjquery

Discovering the parent route details of the current route from within a component

I am facing an issue where I need to identify the parent route /products while working within the scope of the FeaturedProducts.vue component. The current route path for this component is set as /product-list/featured const routes = [ { path: "/ ...

javascriptvue.jsvuejs3

What sets apart `var now = new Date();` and `var now = Date();` in JavaScript

I am specifically interested in exploring the impact of adding "new" on the variable, as well as understanding when and why it is used. I would also like to understand why I am obtaining identical answers when printing both versions. ...

javascriptvariables

Accessing JSON Data Using JQUERY

Currently, I am experimenting with grabbing JSON data from websites using the $.getJSON() method. Here is the code snippet I have been working on: The website I am attempting to retrieve JSON data from can be found here. Interestingly, the code functions ...

javascriptjqueryjsongetgetjson

`18n implementation in Node.js and front-end JavaScript for localization`

I am currently utilizing express js 4.0 and have set up the i18n module from https://github.com/mashpie/i18n-node in combination with ejs views. My goal is to extend this i18n functionality to .js files as well. Is there a way to enable the i18n function ...

javascriptnode.jsexpressinternationalization

Clickable div containing a hyperlink

I need assistance with a clickable div that contains a link. Here is the setup: HTML: <div onClick="goToCat(2);" class="author-topics-block "> <a href="http://mywebsite/page/?cat=2">The woman in steel</a> </div> CSS: .author ...

javascripthtmlhyperlink

Exploring the relationships between schemas in Node.js using Mongoose and MongoDB

Hello, I am a beginner in utilizing MongoDB and Node.js and I have a query. Below is my product schema: const mongoose = require('mongoose'); const Schema = mongoose.Schema; const categorySchema = require('./category'); const Produc ...

javascriptnode.jsmongodbmongoose

The interplay between javascript and PL/SQL tasks in a dynamic scenario

I'm attempting to run multiple pl/sql blocks within a Dynamic Action, providing real-time feedback to the user through a modal dialog displaying the current status. Here is an example of what I am trying to achieve: Processing Step 1... /*Run pl/s ...

javascriptajaxoracle-apex

Is Node.js and Express a suitable server-side package for a WebGL web application?

Currently, I am in the process of creating a webgl application. While using mongoDB for my database and three.js as my webgl library has been helpful during development, I find myself unsure about which server-side technology to incorporate into the appl ...

javascriptnode.jsexpressthree.jswebgl

Retrieve information from the Firebase database in order to update a text string

When I execute this function to retrieve data from firebase database app.listen(3000) app.engine('html', require('ejs').renderFile) var bodyParser = require('body-parser'); var sm = require('sitemap') var firebase ...

javascriptangularjsnode.jsfirebasefirebase-realtime-database

The Typescript compiler is functioning correctly, but the output when running the JavaScript code

Let me start by showcasing my directory tree: \__ root \__ node_modules \__src \__ dir1 \__ index.ts \__ package.json \__ deploy.config //irrelevant here ...

javascriptnode.jstypescriptexpresscompiler-warnings

Generate a dot density map with the help of Google Maps

I am looking to create a dot density map using Google Maps for my state. I have all the counties outlined with their respective populations, and I want to scatter dots randomly within each county to represent the population. The goal is to make a dot densi ...

javascriptjsongoogle-mapsgoogle-maps-api-3dictionary

Looking for assistance with changing the class of a span when a radio button is selected

I'm facing an issue with toggling the class of a <span> when a radio button is clicked. <html> <head></head> <style type="text/css"> .eHide { display:none; } </style> <script type="text/javas ...

javascripthtmlcssradio-button

The issue of a type error within the declaration section of a TypeScript file is causing complications in Angular or

When I attempted to run the below component, I encountered a type issue in my declaration. Here is the specific problem I am facing: Type '{ First: string[]; Second: string[]; Third: string[]; Four: string[]; }' is missing properties such as len ...

javascriptangularreactjstypescript

Checkbox functionality in jQuery fails to work properly after initial selection

Every time I click on the checkbox it seems to activate, but then when I try clicking on it again, nothing happens and the checkboxSelected class remains unchanged. Here is the HTML markup: <div class="galleryMenu-center"> <div ...

javascriptjqueryhtml

Creating a JSON object in JavaScript using an array

Can anyone assist me with the following code snippet for formatting the current month? var monthNames = ['jan', 'fev', 'mar', 'abr', 'mai', 'jun', 'jul', 'ago', 'set&apos ...

javascriptarraysjson