How to remove the <hr> that immediately follows the <hr>?

Question

I have HTML markup that I cannot change.

Example

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

I would like to remove any hrthat immediately follows another hrwithout text between them. As can be seen from the snippet below, this extra one hrcauses a double line.

I do not think this is possible with CSS. I tried using an adjacent (+) selector, but realized that it obviously wouldn't work.

I looked at jQuery:empty , but since it hris self-closing, it’s hard for me to target.

I would be grateful for any suggestions.

Excerpt

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>

Run code

Answer 1

span, sibling hr, , , hr + hr. , span , hr .

HTML , hr p. 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>

Answer 2

:nth-child(). , :nth-child(even)

body {
  width: 500px;
  margin: 0 auto;
}
hr {
  border-top: 3px solid #CCC;
  border-bottom: none;
  color: #CCC
}
hr:nth-child(even) {
  display: none;
}

<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>