如何删除紧随<hr>的<hr>？

sol 发表于 Dev

溶胶

我有无法更改的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>

乔什·克罗齐耶（Josh Crozier）

您可以通过编程将文本节点与span元素包装在一起，然后hr使用建议的初始选择器隐藏同级元素hr + hr。这样做时，将考虑文本节点，因为它们现在是span元素，而相邻hr元素将被隐藏。

另外，由于hr元素不能嵌套在p元素中，因此HTML无效。为了这个示例，我用替换了p元素div，但是它仍然可以与元素一起使用，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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。