Display only the spans that contain text or are not empty

I need a solution to hide only those spans that are empty.

<div class="img-wrapper">
    <div class="showcase-caption" style="display: block; "> <span id="MainContent_ImageCaption_0">This one has caption</span>

    </div>
    <div class="showcase-caption" style="display: block;">  <span id="MainContent_ImageCaption_1"></span>

    </div>
    <div class="showcase-caption" style="display: block;">  <span id="MainContent_ImageCaption_2">Another caption here</span>

    </div>
    <div class="showcase-caption" style="display: block;">  <span id="MainContent_ImageCaption_3"></span>

    </div>
</div>

Link to the code example

javascriptjqueryhtmlcss

Answer №1

If you tweak your JavaScript code (in the provided fiddle) slightly, you can eliminate or conceal the container of the empty element:

$(".img-wrapper span:empty").each( function () {
    $(this).parent().hide(); // alternatively, use .remove() to remove
});

Answer №2

Utilize the :empty pseudo class selector to target specific elements:

div:empty {
    display: none; /* or visibility: hidden */
}

Answer №3

This code snippet can be implemented to hide elements if they are empty:

$(".img-wrapper .showcase-caption span").each(function(){
      if ($(this).is(':empty')) 
          $(this).parent().hide()
});

I tried it out on http://fiddle.jshell.net/0mzpLrt3/ and it worked perfectly.

Answer №4

Interactive Example

Below is the HTML code:

<div class="img-wrapper">
    <div class="showcase-caption" > <span id="MainContent_ImageCaption_0">This content has a caption</span>

    </div>
    <div class="showcase-caption">  <span id="MainContent_ImageCaption_1"></span>

    </div>
    <div class="showcase-caption">  <span id="MainContent_ImageCaption_2">This content has a caption and should be shown</span>

    </div>
    <div class="showcase-caption" > <span id="MainContent_ImageCaption_3"></span>

    </div>
</div>

The JS code to hide elements with empty spans within the .img-wrapper:

$(".img-wrapper span:empty").each( function () {
    $(this).parent().addClass("hide");
});

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

Effects with Cleanup - terminates ongoing API calls during cleanup process

Developing a React album viewing application: The goal is to create a React app that allows users to view albums. The interface should display a list of users on the left side and, upon selecting a user, show a list of albums owned by that user on the righ ...

javascriptreactjsreact-hooksuse-effect

Padding the body of a single-page Angular application to ensure proper spacing and

How do I add padding to the body of a template in an angular ng-app? Where is the best place to include CSS for a ng-app rendered template? please refer to this fiddle for an example https://jsfiddle.net/aghsqnpa/ div.ngview { padding: 25px 50px 75p ...

javascripthtmlcssangularjs

Tips for displaying the response next to the corresponding table data (td) cell

When I click the fourth button, the response is showing on the first td. I want to show the response next to the respective td. Below is my code, can someone help me? Thanks. (i.e., here I am getting the $status using a query, but I want this status to di ...

javascriptphpjqueryajax

Codeigniter raises an error message stating, "No file selected for upload," in cases where data is transmitted via Ajax

Having trouble inserting form data using Ajax and Codeigniter - encountering a 'You did not select a file to upload' error specifically with file uploads. Need help passing input file data through jQuery ajax. Below is the jQuery code snippet: ...

phpjqueryajaxcodeigniter

What is the reason for JSON.parse throwing errors on the same strings that eval does not?

Imagine having something like this: var a = '["\t"]' When you use: eval('var result = ' + a) Everything runs smoothly. However, if you try: var result = JSON.parse(a) You'll encounter an error: Unexpected token. The s ...

javascriptjsoneval

What distinctions can be made between Controlled and Uncontrolled Components when using react-hooks-form?

Trying out the React Hooks form, I came across some interesting concepts like controlled and uncontrolled forms. Controlled Form <form onSubmit={handleSubmit(onSubmit)}> <input name="firstName" ref={register({ required: true })} /> ...

javascriptreactjsreact-hook-form

Retrieving Table Characteristics from an Online Source

Currently utilizing Python 3.4, Windows 10, and Visual Studio 2015 for my project. I am in the process of developing a program that scrapes phone numbers from websites similar to this one. My approach involves using Beautiful Soup 4 to extract the number ...

pythonhtmlvisual-studiobeautifulsouppython-3.4

Tips for implementing validation in AngularJS

Could someone help me with AngularJS validation? I'm new to it and trying to make sure everything is correct. var app=angular.module('myApp',[]) app.controller('myController',function($scope){ $scope.clickMe = function(){ if($(& ...

javascriptjqueryangularjs

What could be causing the <img src= ' '/> tag to malfunction in Express?

While learning about HTML, I noticed that simply using img src="...." worked fine. However, when working with Express, the same code did not work! The documentation mentioned that I needed to place the images in a folder named public, require(&ap ...

javascripthtmlnode.jsexpressserver

Unable to customize the button color within the Bootstrap framework

This button was created using Bootstrap. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <lin ...

htmlcsstwitter-bootstrap

Incorporating external CSS links in the metadata of Next.js 13

A recent update in Nextjs 13 introduced a new feature known as Metadata (https://nextjs.org/docs/app/api-reference/functions/generate-metadata), causing the removal of Head.js. Previously, I would import a CSS file using the <Head> tag as shown below ...

javascriptreactjsnext.jsnext.js13

What could be the reason for my image not loading properly in Vue.js 3?

I'm struggling to load an image using a relative path and value binding with v-for in my template code. Despite following the correct syntax, the website is displaying an error indicating that it can't retrieve the image. Here's a snippet of ...

javascriptvue.jsvuejs3vue-component

Is there a way for me to perfectly align the image and the h1 header on the webpage?

I'm facing some challenges when it comes to aligning an image and an h1 tag on the same line. I've already tried using display: inline and inline-block, but they only affect the container of the two elements. I also set the width to 100% on the s ...

htmlcsscss-position

Encountering issues when attempting to establish the initial date of a react DatePicker based on the user's timezone

I am currently working on a React project and facing an issue with setting the default date of a DatePicker component to the user's timezone received from an API. Despite several attempts, I keep encountering an error whenever I try to inject the date ...

javascriptreactjsnext.js

Tips for personalizing the react-select module

I'm struggling with customizing the appearance of the react-select component. The official documentation lists all the style attributes that can be modified, but I'm having trouble removing the blue borders around the text and container. https:/ ...

cssreactjsnext.jsstylesreact-select

Ensuring the authenticity of dynamic forms

jQuery(document).ready(function(){ $("#submitButton").click(function () { if ( $("#formToSubmit").validationEngine('validate') == true) { $("#formToSubmit").submit(); } }); Utilizing the Validation Engine plugin for jQuery to valida ...

javascriptjqueryformsvalidationjquery-validation-engine

Typekit compatibility with Internet Explorer 11

After dedicating months to a project, everything seemed to be running smoothly until one client consistently pointed out font discrepancies in the screenshots. I attributed this to a possible browser issue but soon discovered that the entire network had sp ...

cssinternet-explorertypekit

employ the value of one array in a different array

Currently, I am working with an array (const second) that is being used in a select element to display numbers as dropdown options {option.target}. My question is: Is there a way to check within this map (that I'm using) if the 'target' from ...

javascripthtmlcssarraysreactjs

Adjust the size of an event in the Angular Full Calendar with Chronofy, while utilizing constraints to control the drag and drop functionality

I'm currently in the process of developing an availability calendar for scheduling meetings during open times. If a time slot is unavailable, users should not be able to place an event there. While I have successfully implemented this feature, I am ...

javascriptangulartypescriptfullcalendarfullcalendar-6

How to Add Motion to Several Markers

Exploring the concept of moving markers on a map with drawn polylines to simulate simultaneous movement is a fascinating challenge. However, encountering some difficulties, such as only the last marker moving while the others remain stationary, can be frus ...

javascriptjquerygoogle-mapsgoogle-maps-api-3google-maps-markers