如果span不是空的，则使用Javascript从字符串中删除字符

Question

我有一个HTML代码：

<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>

价格：每月6,000 UGS

这显示为Price: USD UGS 6,000 per month

我想知道如果跨度price_label price_label_before，如果不是空的话，它是否真的可以删除UGS。如果为空，则不应使用jQuery删除UGS？

$(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

你的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>

你的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

最简单的方法是将可能需要删除的文本包装在自己的span元素中以便于删除，但假设您需要保持HTML结构不变，则可以访问未包含的纯文本。在需要时从JQuery包装的元素集中提取DOM节点引用。

请参阅以下代码中的注释以获得解释：

// 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

您可以使用此代码段来实现您的目标：

$(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>