Suchen Sie ein HTML-Element neben bestimmten schließenden Tag

Question

Ich suche, ob das letzte <hr>-Tag innerhalb der Eltern <main> direkt vor dem schließenden </main>-Tag existiert.

So im Folgenden die <hr>-Tag, das innerhalb des <main> Tag, direkt vor einem Schließen </main> Tag ist das eine gezielte letzte ist:

<main> 
    <div> 
    lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsum 
    lorem ipsumlorem ipsumlorem ipsum 
    </div> 
    <hr class="container" /> 
    <div> 
    lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsum 
    lorem ipsumlorem ipsumlorem ipsum 
    </div> 
    <hr class="container" /> 
    <div> 
    lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsum 
    lorem ipsumlorem ipsumlorem 
    </div> 
    <hr class="container" /> 
</main> 

Obwohl die <hr> sollte nicht entfernt werden, wenn zum Beispiel, gibt es einen <div> Tag davor:

<main> 
    <div> 
    lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsum 
    lorem ipsumlorem ipsumlorem ipsum 
    </div> 
    <hr class="container" /> 
    <div> 
    lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsum 
    lorem ipsumlorem ipsumlorem ipsum 
    </div> 
    <hr class="container" /> 
    <div> 
    lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsum 
    lorem ipsumlorem ipsumlorem 
    </div> 
</main> 

Answer 1

Sie können die HR-Elemente filtern basierend auf, ob sie das letzte Kind des gleichen Eltern sind

$('hr').filter(function() { 
    return this === this.parentNode.lastElementChild; 
}).remove(); 

FIDDLE

Oder alle HR Elemente zielen, die auch das letzte Kind sind

Answer 2

jQuqery Lösung kommt auf das Wahlrecht bekommen:

if($('main .container:last-child').length > 0){ 
    // do your stuff 
} 

Answer 3

Um dies zu erreichen, können Sie das letzte Element innerhalb der main, überprüfen, ob es eine 012 ist, und entfernen Sie es, wenn so:

var $last = $('main :last'); 
 
if ($last.is('hr')) 
 
    $last.remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<main> 
 
    <div> 
 
    lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsum 
 
    lorem ipsumlorem ipsumlorem ipsum 
 
    </div> 
 
    <hr class="container" /> 
 
    <div> 
 
    lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsum 
 
    lorem ipsumlorem ipsumlorem ipsum 
 
    </div> 
 
    <hr class="container" /> 
 
    <div> 
 
    lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsum 
 
    lorem ipsumlorem ipsumlorem 
 
    </div> 
 
    <hr class="container" /> 
 
</main>

Hier ist eine Arbeits jsFiddle als SO Schnipsel noch gebrochen werden:

Working example

Answer 4

if(!$('main hr:last').next().length) // checks if there is a next html element (sibling) after the last hr tag. 
    $('main hr:last').remove(); 

Beispiel: https://jsfiddle.net/zmb79f3a/1/