如何使用jQuery删除div中的最后一个BR元素

Question

我希望用jQuery删除一个div中最后一个<BR>标签。我尝试了下面的代码，但是它也会删除第一个和中间的换行符标签。

HTML代码

<div class="topic">
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.<br/>
 Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,<br/> 
 nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. 
 Nulla consequat massa quis enim. DonecLorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/>
 <br/>
 <br/>
 <br/>
</div>

jQuery 代码

$(document).ready(function(){
  $('.topic').find('br').remove();
});

- abdelghafour arabs

---

如果在最后一个和倒数第二个<br/>元素之间有一个<div>，那么应该发生什么？ - David Thomas

你想用一个按钮删除吗？ - Diego Cardenas

你是用PHP或类似的语言生成这个吗？为什么不在将文本发送到nl2br()之前对其进行修剪？ - MightyPork

@MightyPork 这段代码是由我无法更改的外部资源生成的。 - abdelghafour arabs

$('br').remove(); 只需将此代码添加到jQuery中。 - Diego Cardenas

Answer 1

一种可能的方法是：

// selecting the <br /> element that is a last-child:
$('br:last-child')
// selecting all previous-sibling elements until we find one that is not a <br /> element:
.prevUntil(':not(br)')
// adding the initial selector back to the collection:
.addBack()
// filtering the collection:
.filter(function() {
  var sibling = this.previousSibling;
  // keeping only those <br /> elements with a previous-sibling of nodeType === 3
  // (a textNode), and those whose previous-sibling's nodeValue (with leading
  // and trailing white-space removed) is equal to 0:
  return sibling.nodeType === 3 && sibling.nodeValue.trim().length === 0;
// removing those elements:
}).remove();

$('br:last-child').prevUntil(':not(br)').addBack().filter(function() {
  var sibling = this.previousSibling;
  return sibling.nodeType === 3 && sibling.nodeValue.trim().length === 0;
}).remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topic">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
  <br />Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,
  <br />nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. DonecLorem ipsum dolor sit amet, consectetuer adipiscing elit.
  <br/>
  <br/>
  <br/>
  <br/>
</div>

参考资料：

• :not()选择器。
• addBack()。
• prevUntil()。

- David Thomas

---

你是怎么做到那个“剧透”效果的？有相关的教程吗？ - MightyPork

“Show code snippet”是什么？那只是一个堆栈片段（就像JS Fiddle一样）。在撰写答案或问题时，单击位于文本区域上方的铅笔图标（图像图标旁边）即可打开编辑器。 - David Thomas

根据原始问题的示例，你不应该将其限制在 $('.topic') 中吗？否则，它会删除每个具有 BR 的标签的最后一个 BR 子元素。 - Kevin Nelson

这段代码过于激进了...它删除了内容中所有的 br。如果存在非空文本节点，你需要停止执行。 - Salman A

@Salman：经检查 DOM，更新后的方法似乎有效，你能验证一下吗？ - David Thomas

Answer 2

我知道这不是你要求的内容，但我想你是想去除多余的视觉间隔。如果是这样，只需使用CSS即可减少影响：

br + br{display:none;}

这样做将使第一个分隔符正常工作，而所有其它的分隔符都将被隐藏。

- sandyapplebum

---

猜猜在<div>1<br>2<br>3<br>4<br>5</div>上使用这个CSS会发生什么。 - Salman A

Answer 3

我从未使用过它，但这应该可以工作：

$(document).ready(function() {
    $('.topic').find('br:last-child').remove();
}

文档：http://api.jquery.com/last-child-selector/

- Kevin Nelson

---

@MightyPork，我认为你可能误解了文档的具体规定，即 :last-child（而不是 :last）将匹配“一个父级中的多个最后元素”。 - Kevin Nelson

最后一个之前的那些呢？ - Salman A

@SalmanA，我不确定你的意思。这只会匹配 .topic 中最后一个子元素为 BR 的情况。在此之前的那些将被选择器忽略。请参阅我添加的文档链接，其中有一个将最后一个子元素标记为红色的示例。 - Kevin Nelson

在一个 div 中删除最后的 Br。末尾有四个连续的 br，都应该被删除。 - Salman A

@SalmanA，啊，我明白了...我没有从OP的问题中理解到这一点。我以为他字面上的意思是“最后一个”，而不是第一个之后的每一个。 - Kevin Nelson

@SalmanA，我的错误在于我将Br视为“所有格”而不是“复数”，因此我只是将其忽略为拼写错误。 - Kevin Nelson

Answer 4

$(document).ready(function(){
  $('.topic').find('br:last').remove();
});

使用:last选择器，它将选取最后一个匹配的元素。

- Starmetal

---

它将删除文档中的最后一个br。 - Salman A

Answer 5

这对我有用：

$('#customID br:last-child').remove();

这将从自定义标签中删除最后一个 br 标签。

注意：我使用的是 Jquery 版本 3.1.1

- Nole

Answer 6

使用$('br').remove();来看例子：jsfiddle

- Diego Cardenas

---

这将删除所有的Br标签，而我只想删除最后一个。 - abdelghafour arabs

你可以使用选择器：）$('#SelectorName' 'br').remove(); - Diego Cardenas