What is the best way to modify a CSS property using logical operators in JQuery?

If an element with the class ".has_padding" does not have any text content, it should be set to "display:none;". However, those elements with text inside should remain visible.

Below is some code where I have styled the elements to demonstrate the issue. (I am trying to remove the visible #DDD-colored padding if the element is empty.)

Please note that JQuery has been included for easy execution of the code.

<!doctype html>
<html>
<head>
    <title>Demo</title>
    <style>
    .myBox {
        border: 2px solid #BBB;
        margin: 20px 0;
    }
    .has_padding {
        padding: 10px 40px;
        background: #DDD;
    }
    </style>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>

<div class="myBox">
    <div class="has_padding"></div>
</div>

<div class="myBox">
    <div class="has_padding">I have text.</div>
</div>

<div class="myBox">
    <div class="has_padding">I have text too.</div>
</div>

<script>
    // your code here.
</script>

</body>
</html>

Answer №1

jQuery provides a selector called :empty.

To utilize it, follow this syntax...

$('div.has_padding:empty').hide();

Answer №2

To implement this, utilize the :empty selector in your CSS.

$('.no_content:empty').parent().hide();
.myBox {
  border: 1px solid #AAA;
  margin: 15px 0;
}
.no_content {
  padding: 5px 20px;
  background: #EEE;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="myBox">
  <div class="no_content"></div>
</div>

<div class="myBox">
  <div class="no_content">Some text here.</div>
</div>

<div class="myBox">
  <div class="no_content">More text goes here.</div>
</div>

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

Rapid polygon merging with JavaScript

I have a large geoJSON file containing polygons and multi-polygons, totaling 2.5 MB in size. My goal is to merge all these shapes to display them on a map within a web browser environment. In my Python workflow, I am using shapely.ops.unary_union which p ...

How to perfectly center an absolute positioned icon on a 767px screen

The icons positioned absolutely in the two columns must remain center aligned across all screen resolutions. The media query below attempted to align the icon on mobile devices, but it is inaccurate for any resolution. How can I correct the CSS? @media scr ...

Error: Surprising token found in ReactJS application on CodeSandbox

Encountering an unexpected token on line 5 error in my ReactJS project when testing it on CodeSandbox. Interestingly, the app runs smoothly without errors on my local machine. import React, { Component } from 'react'; import Header from ' ...

In Vue firebase, ensure that the prop is only passed down after it has been

I am facing an issue where I need to pass down the Firebase user as a prop from the root component to my child components. I managed to achieve this by passing the user to my router. However, the problem arises when I wrap my new Vue instance in an onAuthS ...

Laravel route does not receive a parameter sent via Ajax

I am currently using Laravel 5.8 and implementing a discount code system on my website. To achieve this, I attempted to send data via Ajax in the following manner: $.ajax({ type: 'POST', url: baseurl + 'discount/register', ...

Troubleshooting a deletion request in Angular Http that is returning undefined within the MEAN stack

I need to remove the refresh token from the server when the user logs out. auth.service.ts deleteToken(refreshToken:any){ return this.http.delete(`${environment.baseUrl}/logout`, refreshToken).toPromise() } header.component.ts refreshToken = localS ...

Minimal Space Separating Footer Division and Body Element

While there are numerous discussions online about fixing footer alignment issues, I've encountered a unique problem that needs addressing. The issue at hand is a 29px gap between the bottom of the footer and the <body> tag on my webpage, which ...

Sending POST parameters via Jquery POST from a Java Servlet to Javascript

My JavaScript code initiates a POST request on my Servlet. $.post("RecipeServlet", { r_id: r_id, }, function(data, status){ var foo = data.foo; var bar = data.bar; }); Now, the Servlet is expected to work with the received r_id and then send ...

Place an element in a higher position than a slideshow

I recently encountered an issue where I was trying to place a png image above my slideshow. Despite trying various solutions, the image always appeared behind or on top without transparency. Based on the erratic display, it seems like the problem might be ...

Tips on making sure video player controls are always visible on an HTML5 video player

Can anyone help me with my HTML video player? I am trying to make the control bar display always, instead of just when hovered over. Any suggestions? ...

Issue encountered while attempting to retrieve data from a local json file due to Cross-Origin Resource Sharing

I'm attempting to fetch and display the contents of a JSON file on a webpage, but I'm encountering this error message: Access to XMLHttpRequest at 'file:///C:/Users/bobal/Documents/htmlTry/myData.json' from origin 'null' has ...

Validate all JavaScript buttons by binding a click event

I've implemented the JS validation plugin from this source and it's functioning properly. However, it captures all button clicks on the page, including when I click on Back to Home, triggering form validation unnecessarily. I only want the form ...

How can I eliminate the outline from the modal backdrop using Material UI styling shown in the image provided?

https://i.stack.imgur.com/cBCzd.png After attempting to remove the border and box shadow, I am still encountering issues with lines appearing only when clicking on the modal body. The modal styling code has been omitted as it primarily includes flex styli ...

Creating a conditional statement in jQuery that will append text to a specific DIV element after a form has been successfully

I currently have a form set up that is functioning properly, but I am looking to make some changes. Instead of redirecting the user to a new page with a success message upon submitting the form, I want the success message to be displayed in a div next to t ...

Issue when attempting to animate an SVG point using translateX transformation

I am attempting to create a basic animation using the translate X property on a section of my svg when hovering over the element. Here is the code I have so far: <html> <style> .big-dot:hover { transform: translateX(20px); animat ...

Why does using rgba color with an alpha value cause my div to become see-through?

I am currently attempting to assign a background color to a specific style of pop-up, but whenever I use a value that includes an alpha channel, it ends up being transparent. This is the CSS code I have been using: --color: 255, 144, 106, 0.18; background ...

Modify the select input's border color when it is in focus

My select input's focus color is not changing, and I'm struggling to figure out the proper override. .form-control:focus { border-color: inherit; -webkit-box-shadow: none; box-shadow: none; } .forma #kome { border-color: #8e8e8e; -w ...

Creating Stunning CSS Animations for a Slider Using SVG

Looking for help to create an SVG CSS animation for a slider using a mockup image. The animation will feature a balloon with a number value that zooms in and out from left to right or right to left. Currently stuck at the starting point and unsure how to ...

Is the provided code snippet considered a function-statement, function-expression, and function-expression-statement?

Currently, I am examining some code snippets from the EcmaScript.NET project. Specifically, I am delving into the definitions within FunctionNode.cs file. The comment above the definitions provides a detailed explanation of the three types of functions tha ...

Is bower install failing to detect a local npm package?

After running bower install, I encountered the following error message: $ bower install module.js:340 throw err; ^ Error: Cannot find module 'minimist' at Function.Module._resolveFilename (module.js:338:15) at Function.Module._l ...