如何使用jQuery / javascript在br之后刪除div中的文本字符串？

Question

我一直在嘗試刪除每個div中<br>之后出現的可變生產定價（從生成的列表中）。 這里是：

<div class="p-name">
    <a href="somelink.html" class="TLink">Product Name<br>$1.91</a>
</div>
<div class="p-name">
    <a href="somelink2.html" class="TLink">Product Name2<br>$55.91</a>
</div>

我努力了：

$('.p-name').nextAll('br').remove();

和

$(".p-name").nextAll().remove();

價格范圍從$ 0.00到$ 40,000.00

有什么幫助嗎？ 我應該改用Javascript嗎？

Answer 1

每個錨標記具有三個子節點：text + br + text。

要刪除br + tx，您可以執行以下操作：

 $('.p-name').find('a').each(function(index, element) { element.childNodes[1].remove(); element.childNodes[1].remove(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="p-name"> <a href="somelink.html" class="TLink">Product Name<br>$1.91</a> </div> <div class="p-name"> <a href="somelink2.html" class="TLink">Product Name2<br>$55.91</a> </div> 

Answer 2

另一種選擇是使用substr重設每個a的內容

 $(".p-name a").each(function() { var content = $(this).html(); $(this).html(content.substr(0,content.indexOf('<br>'))); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="p-name"> <a href="somelink.html" class="TLink">Product Name<br>$1.91</a> </div> <div class="p-name"> <a href="somelink2.html" class="TLink">Product Name2<br>$55.91</a> </div> 

Answer 3

您可以將<br>元素作為目標，然后將其后的任何同級作為目標，然后將其全部刪除，這樣就不會計算出textnode，這可能是不可靠的

 $('.TLink br').each(function(_, el) { var els = []; while (el = el.nextSibling) els.push(el); $(els).remove(); }).remove(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="p-name"> <a href="somelink.html" class="TLink">Product Name<br>$1.91</a> </div> <div class="p-name"> <a href="somelink2.html" class="TLink">Product Name2<br>$55.91</a> </div>