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

What is the best way to update the color CSS property of an element with jQuery?

Can someone explain to me how to modify CSS using jQuery? I am trying to change the font color of "Valid VIN" to red, but my current code doesn't seem to be working: $("#result").html(<font color="red">"Valid VIN"</font>); ...

What is the best way to prevent the navbar from covering content? The navbar-static-top option helps, but it doesn't allow for fixed-scroll

I am facing an issue with my navigation bar while using asp.net. When I apply the class navbar-fixed-top, the navigation bar becomes fixed and scrolls with the page, but it overlaps the content in the contentplaceholder However, when I switch to the clas ...

Place the element at the bottom of the row above

I'm utilizing Angular to retrieve a list of items from the server and exhibit them on the page using: <div class="col-sm-6 col-md-4" ng-repeat="activity in activities"> <img ng-src="[[ act.icon ]]" height="100" alt=""> <h3>[ ...

Executing function statement

I'm currently learning about React hooks, and I have a question regarding the behavior of two function expressions within different useEffect hooks. In one case, the function expression named timerId in the first useEffect is invoked automatically wit ...

Difficulty encountered while using React.js map function to access specific JSON data

I'm encountering an issue where I am unable to read data from a JSON file. After checking that the data is stored in the component state and logging it to the console once the component is mounted, I attempted to render the URL string from the JSON da ...

Ways to retrieve the text of the <Label> element without relying on the "id" attribute

I have a challenge in extracting text enclosed within the `Label` tag. My knowledge of Javascript and JQuery is limited, so I require guidance on accomplishing this task. Currently, I am attempting to use code that I found on a stackoverflow post titled ge ...

Update the navigation bar from displaying "LOGIN" to "LOGOUT

I am facing a challenge in updating the navbar login link to a logout link once the user logs in. I have attempted the following: header.ejs: <ul class="nav navbar-nav navbar-right"> <li id="home"><a href="/ ...

JavaScript encounters a parsing error when dealing with an async function

Ever since I developed a node.js web application, I've been utilizing MSSQL for the database. To streamline SQL functions, I crafted functions (sql.js) to handle all the necessary queries. Furthermore, I set up async function handlers (controllers.js) ...

The onBlur event attached to a div is triggered when transitioning from one input element to another within the same div

Here's a scenario: I have a div with two input fields nested inside, like this: <div> <input placeholder="Input1"/> <input placeholder="Input2"/> </div> I have a requirement to trigger a specific ...

Style your Checkbox Button with the Checkbox component from Element Plus

Currently, I am utilizing Vue 3 along with the Element Plus library. My goal is to modify the hover, active, and select colors of the Checkbox Button that I have implemented. Unfortunately, my attempts to do so have not been successful. I essentially copie ...

ASP.NET - Severely struggling with connectivity issues involving AJAX/JQUERY

I have developed a real-time update script that refreshes certain div elements with server-side information every second. The issue I am facing is that the script seems to be causing heavy usage, as even my mouse animation in Google Chrome keeps loading. ...

Error message appearing when attempting to add a product to the cart in Magento using AJAX

Encountering an error with the magento 1.8 ajax cart, stating "product not found" The javascript code I implemented: function setLocationAjax(url,id){ var data = jQuery('#product_addtocart_form').serialize(); data += '& ...

transmitting a CSV file from PHP to the web browser

I have researched extensively on this topic, but I am still unable to make it work. My goal is to click a link in HTML and have it retrieve a text file (specifically a CSV). <button type="button" id="csvButton" class="genericButton"><a i ...

While in the process of developing a React application, I have encountered the following challenge

PS F:\Programming Tutorials Videos\R Practice> npx create-react-app custom-hook npm ERR! code ENOTFOUND npm ERR! syscall getaddrinfo npm ERR! errno ENOTFOUND npm ERR! network request to https://registry.npmjs.org/create-react-app failed, reaso ...

Jquery doesn't immediately hide an element after the first click.TabPage.getSelection().extentNode rectangular_HTML

I'm experiencing a peculiar issue with an event listener $(document).on('click', '.suggested-location-item', function(event) { event.preventDefault(); $('#IDsuggestedLocationsList').html(''); $(&apo ...

What is the best way to implement CSS rules for a hidden submenu?

Can anyone help me figure out how to apply CSS rules for a hidden submenu? I've attempted to use some JavaScript, but it's not working as expected. Below is a sample of the code I'm working with. The idea is that when you click on the anchor ...

I'm encountering an issue where I receive the error `Cannot read property 'map' of undefined` while attempting to integrate the backend with React. What could be causing this error and how

I'm currently learning React and I've been using a tutorial here to connect my database to the front end of my React application. Unfortunately, every time I try running 'npm start' at 'localhost:3000' in express-react/backend ...

What is the best way to ensure that the same information is included on every page of

Currently developing a dynamic website where certain components such as the fixed header, menubar, and footer are common across multiple pages. What is the best way to include these fixed components on every webpage? I am utilizing JSP and JavaScript for ...

I keep receiving an error message when trying to use slide() in jQuery

Can someone help me understand why I am getting an error with this slide() function? $(this).hide("slide", { direction: "down" }, 1000); Error: Message: Object doesn't support this property or method Thanks, Jean ...

What is the best way to parse a JSON file in Angular?

Can you please explain how to read a JSON file? I have been able to successfully read a JSON file using a controller, but when I try to read it from a factory, the content is null. Why is this happening? http://plnkr.co/edit/THdlp00GuSk1NS6rqe5k?p=preview ...