<hr>の直後にある<hr>を削除する方法？

Question

私は変更できない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>

Answer 1

を使用したいと思います、 hr + hr。そうすることで、テキストノードは今度はspanの要素であり、隣接するhr要素は隠されているので、テキストノードが考慮されます。

hr要素はp要素にネストできないため、HTMLは無効です。この例のために、p要素をdivに置き換えましたが、それでもp要素で機能し、技術的には変更する必要はありません。

$('.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()セレクタを使用します。だから、あなたのケースでは、あなたがプログラム的span要素を持つテキストノードをラップして、あなたが提案し、最初のセレクタを使用して兄弟hr要素を隠すことができ: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>