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

Question

I have HTML markup that I am unable to alter.

Example

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

I would like to remove any hr that immediately follows another hr without text between them. As you can see from the snippet below, that extra hr is causing a double line.

I don't think this is possible with CSS. I tried using adjacent (+) selector but realised it obviously won't work.

I looked at using jQuery :empty, but as hr is self-closing I'm finding it hard to target.

I'd appreciate any suggestions.

Snippet

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

You could programatically wrap the text nodes with span elements and then hide the sibling hr elements using the initial selector that you suggested, hr + hr. In doing so, the text nodes will be accounted for since they are now span elements, and the adjacent hr elements will be hidden.

As a side note, the HTML is invalid since hr elements can't be nested in p elements. For the sake of this example, I replaced the p element with a div, but it would still work with the p element and the HTML technically wouldn't have to be changed.

$('.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

You would use the :nth-child() selector. So, in your case you would want to use the :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>