Removing Characters from a string if span is not empty using Javascript

Question

I have an html code:

<div class="listing_detail col-md-4 propertyprice_display"><strong>Price:</strong> 
<span class="price_label price_label_before">USD </span> UGS 6,000 
<span class="price_label">per month</span></div>

Price: UGS 6,000 per month

That is displayed as Price: USD UGS 6,000 per month

I am wondering if its actually possible to remove UGS if the span price_label price_label_before if not empty. If empty, UGS should not be removed using jQuery?

 $(document).ready(function(){ var spanText = $('.price_label_before').text().trim(); if(spanText !== null){ var nHTML = $('.propertyprice_display').html(); nHTML = nHTML.replace('UGS',''); $('.propertyprice_display').html(nHTML) } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="listing_detail col-md-4 propertyprice_display"><strong>Price:</strong> <span class="price_label price_label_before">USD </span> UGS 6,000 <span class="price_label">per month</span></div> <div class="listing_detail col-md-4 propertyprice_display"><strong>Price:</strong> <span class="price_label price_label_before"> </span> UGS 7,000 <span class="price_label">per month</span></div>

Answer 1

Your html

<div class="listing_detail col-md-4"><strong>Price:</strong> 
<div class='emptyclass'>
<span class="price_label price_label_before"> </span> UGS 6,000 
<span class="price_label">per month</span></div>
</div>

Your JS

$(document).ready(function(){

if($('.price_label_before').html().trim()=="")// check if span is empty
{
     $('.emptyclass').html('');//if yes then emtpty div
}
else
{
    //your else defination
}
});

Answer 2

The simplest thing to do would be to wrap the text that may need to be removed in its own span element for easy removal, but assuming that you need to keep the HTML structure as is, you can access the plain text that is not wrapped by extracting a DOM node reference from the JQuery wrapped set of elements when needed.

Please see the comments in the code below for explanations:

 // Just passing a function to the JQuery shortcut identifier: $ is the same // thing as: $(document).ready(function()... $(function() { // Get reference to the element to check: var $spanToCheck = $(".price_label.price_label_before"); // Check the element's text: if ($spanToCheck.text() !== "") { // Get reference to the text node that comes after the span. Note the [0] which // extracts an element from the JQuery wrapped set and returns a regular DOM node: let nodeToFix = $(".price_label.price_label_before")[0].nextSibling; // Correct the node value of the node nodeToFix.nodeValue = nodeToFix.nodeValue.replace("UGS", ""); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="listing_detail col-md-4"><strong>Price:</strong> <span class="price_label price_label_before">USD </span> UGS 6,000 <span class="price_label">per month</span></div> <div class="listing_detail col-md-4"><strong>Area:</strong> <span class="">10sqm </span> </div>

Answer 3

You can use this snippet to achieve what you want:

 $(document).ready(function(){ var spanText = $('.price_label.price_label_before').text().trim(); if(spanText !== ''){ var nHTML = $('.listing_detail').html(); nHTML = nHTML.replace('UGS',''); $('.listing_detail').html(nHTML) } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="listing_detail col-md-4"><strong>Price:</strong> <span class="price_label price_label_before">USD </span> UGS 6,000 <span class="price_label">per month</span></div>