switch the visibility of the p tag based on its content

It seems like solving this shouldn't be too challenging, but I'm still learning when it comes to Javascript or JQuery.

HTML:

<p><span id="AddLine1Summary"></span>,</p>
<p><span id="AddLine2Summary"></span>,</p>
<p><span id="TownCitySummary"></span>,</p>
<p><span id="CountySummary"></span>,</p>
<p><span id="PostcodeSummary"></span></p>

Even when the Address Line 2 field is left blank, a value of "," remains. This results in the summary page displaying:

12 Bob Street,
,
BOLTON,
Lancashire,
BL1 1AC

I am working on removing the line 

<p><span id="AddLine2Summary"></span>,</p>
completely when the Address Line 2 is empty. Currently, I have tried the following code:

<script>
$(document).ready(function () {

if ($('#AddLine2Summary:contains(",")').length == 1) {
    $("#AddLine2Summary").parent().hide();
}

});
</script>

The use of parent.hide is necessary to ensure that the entire <p> element is hidden, not just the <span>.

javascriptjqueryhtmlcss

Answer №1

Instead of verifying the length of ",", another approach is to check for any text within a span with the ID AddLine2Summary. If the span is empty, you can then implement code to hide its parent element.

The revised code snippet would be:

if ($('#AddLine2Summary').is(':empty')) {
    $("#AddLine2Summary").parent().hide();
}

Answer №2

To start off, consider placing your HTML snippet within a designated container for easier selection:

<div class="location-container">
    <p><span id="AddressLine1"></span>,</p>
    <p><span id="AddressLine2"></span>,</p>
    <p><span id="CitySummary"></span>,</p>
    <p><span id="StateProvinceSummary"></span>,</p>
    <p><span id="ZipCodeSummary"></span></p>
</div>

Next, utilize jQuery to identify empty span elements within this container and hide their respective parent p tags.

$('.location-container span:empty').closest('p').hide();

Sample demonstration

This approach will apply across all vacant address fields, not solely focusing on #AddressLine2.

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

Looking to send an HTTP request to submit a form within a Node.js application to an external website?

Can someone help me with submitting a form on a different site and receiving a response? I'm having trouble figuring out how to do this. Here is the website I am targeting: Below is my code snippet: var http = require('http'); var options ...

javascriptnode.jshttprequest

What is the best way to customize a video in Bootstrap 5 so that it remains at the bottom of the screen with centrally aligned text

When using Bootstrap 5, I am facing a challenge with a video on the index page that plays beneath the navigation. I want to maintain the 16x9 aspect ratio and have centered text overlayed on the video. However, I encounter an issue when attempting to set a ...

cssvideooverlaybootstrap-5

Issue encountered while executing tasks in the Gruntfile.js file

Having trouble with Grunt concatenating my CSS files into one named production.css Below is the output I received from the command prompt: C:\Users\josha\Desktop\Repos\AJAX Project - Grunt Test>grunt C:\Users\josha& ...

javascriptnode.jsgruntjsnpm

The video is not appearing on mobile devices using Safari, Firefox, and Chrome, but it is displaying properly on desktop computers

My website has a video in the header that works fine on desktop but not on mobile. I am using next.js 13.4 and here is my code: <video id="background-video" autoPlay playsInline loop muted classN ...

javascripthtmlreactjsnext.jsfrontend

Are Bootstrap classes like "row row-md" or "row row-cols" compatible with images?

I'm having an issue where the images are not displaying properly. When I try replacing the image line with something like <h1></h1>, it works just fine. Why is this not working with images? I also attempted using div class="col col-lg ...

htmlcssbootstrap-5

"We are unable to set a value for a global array unless we utilize the .push() method

It's puzzling that I can't populate a global array without using the .push() method. (function() { var globalEmail = []; var testUpdate = function() { var arr = [1, 2, 3]; if (globalEmail.length > 1) { gl ...

javascriptnode.jsecmascript-6

Clearing LocalStorage and Cache upon initial loading in Next.js

Our project requires continuous updates, and currently users are required to manually clear their cache and localStorage data after each update in order to access the new features. Is there a solution to automatically clear all cached data upon user visi ...

javascriptreactjsnext.jslocal-storage

Is there a way to capture real-time console output in an ExpressJS application while a script is running?

I'm facing a challenge in integrating the output of a bash script into an ExpressJS application to then send the data to a client. To address this, I have developed a simplified version of my actual script for testing purposes. My goal is to capture a ...

javascriptnode.jsbashexpressshelljs

Utilizing BehaviourSubject for cross-component communication in Angular

My table is populated with data from a nodeJS API connected to methods inside my service. I attempted using a Behavior Subject in my service, initialized as undefined due to the backend data retrieval: Service: import { Injectable } from "@angular/core" ...

javascriptangularcomponentsbehaviorsubject

Mobile browsers are displaying fonts unevenly within tables

Currently in the process of developing a desktop site () that should function optimally on mobile browsers without the need for a separate mobile version. While mobile Safari scales up fonts in large text blocks, tables used for content are causing some is ...

htmlcss

What steps can I take to ensure that the submenu remains visible for users to make their selection?

I'm currently working on implementing a drop-down sub-menu next to the navigation bar located in the center of the image. I have uploaded an image of a transparent box (representing the background of the sub-menu) and used the following codes: When h ...

jquerydrop-down-menu

Ways to modify the color of every appearance of a term in an html grid using css

My HTML code includes an AngularJS table as shown below: <table id="searchTable"> <thead> <tr> <th>Index</th> <th>Observation</th> <th>Reported By</th> ...

htmlcssangularjs

Utilizing Node and Express to promptly respond to the user before resuming the program's

I am accustomed to receiving a user's request, handling it, and providing the outcome in response. However, I am faced with an API endpoint that requires about 10 tasks to be completed across various databases, logging, emailing, etc. All of these ta ...

javascriptnode.jsexpressasync-await

Searching for a specific value within a list that has been fetched from a database using AngularJs can be achieved by simply clicking on the search button

Seeking assistance on a search functionality issue. I am able to filter search results from a list retrieved from the database and displayed on an HTML page, but facing difficulty in getting complete search results from the controller. When clicking the se ...

javascripthtmlangularjs

Encountering issues with uploading files using ajax

Developing my own custom CMS requires me to enable file and image uploads. Despite attempting to integrate the blueimp uploader, I encountered difficulties. The goal is to transmit formData through a jquery script to interact with my CMS. In PHP code (rec ...

phpjqueryajaxhtml

Developing a Mongoose organization/class framework?

Currently, I'm in the process of developing a web application using Node.js, Express, and Mongoose/MongoDB. An important query has arisen regarding how to effectively organize and structure methods related to Mongoose. It's necessary for me to u ...

javascriptnode.jsexpressmongoose

Issues with managing ajax response handlers

Just dipping my toes into the world of ajax and attempting to create a reusable ajax request function. According to Firebug, the request is successfully fetching the correct data from my php file. However, for some reason, the response isn't getting i ...

javascriptajax

"Retrieve real-time information from the server directly on the client side

Within my express router, I validate the data submitted on a form and then render another page if the data is valid, passing along the form data. My goal is to be able to access this passed data on the client-side. In the chat.ejs view, I have a chatroom.j ...

javascriptnode.jsajaxexpress

What is the proper way to address the error message regarding requestAnimationFrame exceeding the permitted time limit?

My Angular application is quite complex and relies heavily on pure cesium. Upon startup, I am encountering numerous warnings such as: Violation ‘requestAnimationFrame’ handler took 742ms. Violation ‘load’ handler took 80ms. I attempted to resolve ...

htmlangulartypescript

Transforming a massive JSON object into a Blob concerns directly converting it into an ArrayBuffer or Blob to prevent exceeding the maximum string length error

Situation: Within my application, I am encountering the following code: let blob = new Blob([JSON.stringify(json)], {type: "application/json"}); This code sometimes fails because the maximum string length allowed in Chrome is approximately 500M ...

javascriptjsonarraybuffer