使用jQuery删除两个标记之间的文本

Question

你好开发人员，我试图使用jQuery删除两个标签之间的某个字符：

<div class="product-details">
  <p class="product-name">Gastronormbehälter PROFI GN 1/6 - 150</p>
  <strong>1</strong> x
  <span class="price">9,14&nbsp;€</span>
</div>

在这种情况下，强标记和span标记之间的“x”。 我无法在product-details类中搜索“x”，因为产品名称中可能有“x”。 这就是为什么我认为应该删除<strong>和<span>之间的所有内容是最好的事情。

这也必须使用jQuery完成，我无法访问此代码以自行删除它。 希望任何人都有解决方案，因为到目前为止我没有任何工作。

Answer 1

给出示例，您可以从.product-details div中删除所有子textNodes。 您可以使用contents() ， filter()然后remove()在jQuery中执行此操作：

 $('.product-details').contents().filter(function() { return this.nodeType == 3 && this.nodeValue.trim(); }).remove(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="product-details"> <p class="product-name">Gastronormbehälter PROFI GN 1/6 - 150</p> <strong>1</strong> x <span class="price">9,14&nbsp;€</span> </div> 

Answer 2

或者，您可以使用DOM关系来定位节点元素。 在示例中，您可以获得对<strong>节点的引用，然后使用nextSibling获取所需元素

 var element = document.querySelector('.product-details > strong'); //element.nextSibling.nodeValue = "Modified Value"; element.nextSibling.parentNode.removeChild(element.nextSibling) 

 <div class="product-details"> <p class="product-name">Gastronormbehälter PROFI GN 1/6 - 150</p> <strong>1</strong> x <span class="price">9,14&nbsp;€</span> </div> 

Answer 3

使用$('.product-details').children()来获取带有标记的元素。 由于， x没有任何标签，因此将被删除。 然后，将此结果设置为.product-details的新html内容。

 $('.product-details').html($('.product-details').children()); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="product-details"> <p class="product-name">Gastronormbehälter PROFI GN 1/6 - 150</p> <strong>1</strong> x <span class="price">9,14&nbsp;€</span> </div>