Removing last image via jQuery

I would like to add an image at the end of each "booklist" within the "genre" div, but remove it for the last "booklist" within each genre. The following code is it adding just fine, but I'm messing somethi开发者_如何学Pythonng up when it comes to the removal. It's only removing the last image from the last .booklist on the page.

This is my HTML:

<div class="genre">

    <div class="booklist">
    <!-- stuff -->
    </div><!-- .booklist -->

    <div class="booklist">
    <!-- stuff -->
    </div><!-- .booklist -->

</div><!-- .genre -->

<div class="genre">

    <div class="booklist">
    <!-- stuff -->
    </div><!-- .booklist -->

    <div class="booklist">
    <!-- stuff -->
    </div><!-- .booklist -->

 </div><!-- .genre -->

And this is my jQuery:

// ADD HEART DIVIDER BETWEEN SERIES ON BOOK PAGE
$(".genre .booklist").append("<img class='hr' src='"+my_home_object.my_stylesheet_path+"/images/heart-hr.png' />");
$(".genre .booklist:last img:last").remove();

Thank you for your help!

Try this to remove the last imgs in the last divs with class "booklist" in each "genre":

$(".genre .booklist:last-child > img:last-child").remove();

:last only selects one element, so use :last-child.