title: How to remove <hr> that immediately follows a <hr>?
body: <p>I have HTML markup that I am unable to alter.</p>
  
  <p><strong>Example</strong></p>
  
  <pre><code>&lt;p&gt;
    TEXT 1
    &lt;hr&gt;some text
    &lt;hr&gt;
    &lt;hr&gt;TEXT 2
    &lt;hr&gt;some text
  &lt;/p&gt;
  </code></pre>
  
  <p>I would like to remove any <code>hr</code> that immediately follows another <code>hr</code> without text between them. As you can see from the snippet below, that extra <code>hr</code> is causing a double line.</p>
  
  <p>I don't think this is possible with CSS. I tried using adjacent (+) selector but realised it obviously won't work.</p>
  
  <p>I looked at using <a href="https://api.jquery.com/empty-selector/" rel="nofollow noreferrer">jQuery <code>:empty</code></a>, but as <code>hr</code> is self-closing I'm finding it hard to target. </p>
  
  <p>I'd appreciate any suggestions.</p>
  
  <p><strong>Snippet</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    width: 500px;
    margin: 0 auto;
  }
  hr {
    border-top: 3px solid #CCC;
    border-bottom: none;
    color: #CCC
  }
  hr + hr {
    /* display: none; // doesn't work */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;
    TEXT 1
    &lt;hr&gt;some text
    &lt;hr&gt;some more text
    &lt;hr&gt;even more text
    &lt;hr&gt;
    &lt;hr&gt;TEXT 2
    &lt;hr&gt;some text
    &lt;hr&gt;some more text
    &lt;hr&gt;even more text
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>