Wie entfernt man <hr>, die unmittelbar auf eine <hr> folgt?

Question

Ich habe HTML Markup, die ich nicht ändern kann.

Beispiel

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

ich jede hr entfernen möchten, die sofort eine andere hr ohne Text zwischen ihnen folgt. Wie Sie aus dem folgenden Ausschnitt sehen können, verursacht das zusätzliche hr eine doppelte Zeile.

Ich glaube nicht, dass dies mit CSS möglich ist. Ich habe versucht, neben (+) Selektor zu verwenden, aber realisiert, dass es offensichtlich nicht funktioniert.

Ich sah mit jQuery :empty, aber als hr ist selbstschließend Ich finde es schwer zu Ziel.

Ich würde mich über Vorschläge freuen.

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

Sie programmatisch die Textknoten mit span Elemente wickeln konnte und dann verwenden, um die Geschwister hr Elemente der anfänglichen Wähler, die Sie vorgeschlagen, hr + hr. Auf diese Weise werden die Textknoten berücksichtigt, da sie jetzt span Elemente sind und die angrenzenden Elemente hr ausgeblendet werden.

Als eine Randnotiz ist der HTML-Code ungültig, da hr Elemente nicht in p Elemente verschachtelt werden können. Für dieses Beispiel ersetzte ich das Element durch ein div, aber es würde immer noch mit dem Element arbeiten und das HTML müsste technisch nicht geändert werden.

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

würden Sie verwenden den :nth-child() Selektor. Also, in Ihrem Fall würden Sie verstecken die :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>