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

Deleting an item from a Vue.js list

I'm currently working on a project to develop a basic webpage that allows users to add or remove textboxes using vue.js. new Vue({ el: "#app", data() { return { list: [] }; }, methods: { deleteFromList(index) { this ...

javascripthtmlcssvue.jsweb

Manipulate multiple jquery elements by adding or removing classes

I am looking to dynamically change the background color of parent elements based on the selection of a radio button. My goal is to apply this functionality to multiple elements such as Post review, Post comment, etc. All these templates share a common HTM ...

jquery

Executing an AJAX request using a combination of jQuery and Javascript to access a webpage located on an external domain

The question at hand is quite straightforward, but finding the answer might not be as easy. It's all part of the fun! ...

jqueryajaxdnsexternal

Http post request failing to execute

I'm having an issue with an ActionResult that has the HttpPost attribute. It seems like I need this attribute when the user selects a date from a DateTimePicker. In my scenario, I have 2 DateTimepickers of type @html.EditorFor. These pickers correspon ...

c#jqueryasp.net-mvcdatepickerviewmodel

The XMLHttpRequest onload() function is failing to pass an instance of the XMLHttpRequest object

I am facing an issue with a function that sends a basic AJAX request to my server. The JavaScript code in the browser is as follows: function testRequest() { var xhr = new XMLHttpRequest(); xhr.onload = () => { console.log("RESPONSE R ...

javascriptajaxexpresshttpxmlhttprequest

Scrolling automatically within a child element that has a maximum height limit

I am currently developing a console/terminal feature for my website. https://i.stack.imgur.com/AEFNF.jpg My objective is to allow users to input commands and receive output, which might consist of multiple lines of information. When new output is displa ...

javascripthtmlcssvelocity.js

Can you explain which variable is considered global in Node.js?

Instead of writing var global = window for the browser I want my code to be able to work in a node environment as well. Something like var global = window || node_global What is node_global? I couldn't find any clear answer here: or here https ...

javascriptnode.js

Once you have successfully navigated past Div2, smoothly transition downwards to Div1 and transform it into a sticky

I wish to scroll down, and view #div1... also see #div2... When #div2 disappears from sight, I want #div1 to slide down and stay fixed at the top of the window. If I reach the footer div, I no longer want #div1 to remain sticky. If it's po ...

javascriptjqueryhtmlcss

Show Messages using jQuery UI

While browsing through jQuery UI's themes page, I came across these interesting styles. I am curious about how to incorporate these styles to display messages statically as well as with JavaScript. Thank you in advance. ...

jqueryjquery-ui

Leveraging jQuery for Crafting a Quiz with True or False Questions

Exploring the most effective approach to constructing a questionnaire. Find images below for reference. The current code setup is functional but becomes lengthy after just two questions. How can I streamline this code to minimize repetition? // prevent d ...

javascriptjquery

Accessing the URL causes malfunctioning of the dynamic routing in Angular 2

I am currently working on implementing dynamic routing functionality in my Angular application. So far, I have successfully achieved the following functionalities: Addition of routing to an existing angular component based on user input Removal of routin ...

javascriptangularangular2-routingangular-routingangular-router

Identifying Browsers using CSS

I am struggling to understand why my HTML5 website appears differently in each browser. It seems like a CSS issue, but I can't pinpoint the exact problem. Here are screenshots of how the site looks on different browsers: Chrome: Safari: Internet E ...

csshtmlcross-browser

Learn how Angular 2 allows you to easily add multiple classes using the [class.className] binding

One way to add a single class is by using this syntax: [class.loading-state]="loading" But what if you want to add multiple classes? For example, if loading is true, you want to add the classes "loading-state" and "my-class". Is there a way to achieve t ...

javascriptangularbinding

Issue with arranging blocks in a horizontal line in Opera

I am currently experiencing an issue with a wide page that contains an information block and numerous images positioned to the right. The layout is designed to be used with a horizontal scrollbar. While this setup works perfectly in Firefox, Safari, Chrom ...

htmlcssoperahorizontal-scrolling

What is the inability to place a div that is 30% wide alongside another div that is 70% wide, and keep them in a horizontal line?

If I make a div that is 30% wide, and another div that is 70% wide, they do not align horizontally. To fix this, I need to ensure that the combined widths of the two divs are less than 100%. Here's an example of how it can be done: <div id="wrapp ...

htmlcss

Update the href attribute with values from the form fields

My current project involves creating a form with 5 input fields: Service type Number of days Number of children Number of adults I want to dynamically change the value of a button based on these variables using JavaScript. Here is my code so far: JS ...

javascriptjquery

Generate a fresh line within the source code

Currently, I am facing a challenge with dynamically loading CSS, JS, and other components as it appears messy when viewed from the source. Although this issue does not impact functionality, I am not satisfied with how it looks in the source code. When exam ...

phpcss

Looking to retrieve a specific data element within Vue.js?

Here's a thought-provoking query for you. Imagine I have some data stored in an element in the form of an array like this: data: { product: socks, variants: [ { variantId: 2234, variantColor: 'Green', varian ...

javascripthtmlcssvue.js

Transform an Angular 2 application to seamlessly incorporate an SDK

I have been working on an Angular 2 application and I am curious if it is feasible to transform this into an SDK that can be easily integrated into other applications by simply adding script tags in their headers. If this conversion is not achievable, co ...

javascriptangularparse-javascript-sdk

Tips for extracting a specific segment from a URL string

Take a look at the outcome of the console.log below: console.log('subscribe:', event.url); "https://hooks.stripe.com/adapter/ideal/redirect/complete/src_1E2lmZHazFCzVZTmhYOsoZbg/src_client_secret_EVnN8bitF0wDIe6XGcZTThYZ?success=true" I need to ...

javascripttypescript