javascript - 如何删除紧跟在 之后的 ？

Question

我有无法更改的 HTML 标记。

示例

<p>
  TEXT 1
  <hr>some text
  <hr>
  <hr>TEXT 2
  <hr>some text
</p>

我想删除紧跟在另一个 hr 之后且它们之间没有文本的任何 hr。正如您从下面的代码片段中看到的那样，额外的 hr 导致了一条双线。

我认为 CSS 不可能做到这一点。我尝试使用相邻 (+) 选择器，但意识到它显然行不通。

我查看了使用 jQuery :empty , 但由于 hr 是自动关闭的，我发现它很难定位。

如果有任何建议，我将不胜感激。

片段

body {
  width: 500px;
  margin: 0 auto;
}
hr {
  border-top: 3px solid #CCC;
  border-bottom: none;
  color: #CCC
}
hr + hr {
  /* display: none; // doesn't work */
}

<p>
  TEXT 1
  <hr>some text
  <hr>some more text
  <hr>even more text
  <hr>
  <hr>TEXT 2
  <hr>some text
  <hr>some more text
  <hr>even more text
</p>

Answer 1

您可以通过编程方式用 span 元素包裹文本节点，然后使用您建议的初始选择器 hr + hr hr 元素。这样做时，文本节点将被考虑在内，因为它们现在是 span 元素，并且相邻的 hr 元素将被隐藏。

作为旁注，HTML 是无效的，因为 hr 元素不能嵌套在 p 元素中。为了这个例子，我用 div 替换了 p 元素，但从技术上讲它仍然可以与 p 元素和 HTML 一起使用不必更改。

$('.parent-element').contents().filter(function() {
  return this.nodeType === 3 && this.textContent.trim() !== '';
}).wrap('<span/>');

hr {
  border-top: 3px solid #CCC;
  border-bottom: none;
  color: #CCC
}
hr + hr {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="parent-element">
  TEXT 1
  <hr>some text
  <hr>some more text
  <hr>even more text
  <hr>
  <hr>TEXT 2
  <hr>some text
  <hr>some more text
  <hr>even more text
</div>