jQuery remove or add style to last of specific type of element

1736 views javascript
-1

I have a jQuery page that has a few things going on. All of the functionalities are complete. The only thing that's not complete is removing the last hr (only the last one) of each table. I need to know how to the last of a specific type of element in an array. All the elements that are wrapped in the tables are their own array. I need to loop through each of those tables and only remove the last hr in the table for each table. I've tried many methods and can't seem to get it. The code I have below only removes the last hr for the last table. This doesn't complete my task.

jQuery/ JavaScript Code (Everything works except for removing the last HR)

<script>
$(document).ready(function(){
  var H2SingerTitles = $("h2.toggleSinger");
  for (i = 2; i < H2SingerTitles.length; i++) {
    var currentH2Singer = H2SingerTitles[i];
    var siblingsofH2Singer = 
    $(currentH2Singer).nextUntil("h2.toggleSinger");
    $(siblingsofH2Singer).wrapAll("<table></table>");
    for (j = 0; j < siblingsofH2Singer.length; j++) {
      $("hr").last().css("border-top", "none");
    } // line ends for loop with j counter
  } // line ends for loop with i counter 
  togglerHeaders.slice(0,2).removeClass("toggleSinger");
  $(".toggleSinger").next().hide();
  $(".toggleSinger").click(function(){
    $(".toggleSinger").next().toggleClass();
  });
}); 
</script>

The inner loop (which is below) is what I'm trying to use to loop through the tables one by one then remove only the last HR in the table. For some reason it's not working.

for (j = 0; j < siblingsofH2Singer.length; j++) {
  $("hr").last().css("border-top", "none");
} // line ends for loop with j counter

Below is my HTML

<div id="mainPage">
  <h2 class=""><span class="title">Whitney Houston</span></h2>
  <div class="aboutInfo">
    <img src="whitney_houston.jpg" height="150">
    <a href="www.whitneyhouston.com" target="_blank"><h3><em>The Voice</em> 
    </h3></a>
    <h3>Worldwide Famous Vocalist, Singer and Performer</h3> 
    <p>I will always love you</p>
    <br>
    <hr>
  </div> 

  <h2 class=""><span class="title">Mariah Carey</span></h2>
  <div class="aboutInfo">
    <img src="mariah_carey.jpg" height="150">
    <a href="www.mariahcarey.com" target="_blank"><h3><em>Whistle 
    Register</em></h3></a>
    <h3>Worldwide Famous Vocalist, Singer and Performer</h3> 
    <p>Hero</p>
    <br>
    <hr>
  </div>

  <h2 class="toggleSinger"><span class="title">Michael Jackson</span></h2>
  <table >
    <div class="aboutInfo">
      <img src="michael_jackson.jpg" height="150">
      <a href="www.michaeljackson.com" target="_blank"><h3><em>King of
      Pop</em></h3></a>
      <h3>Worldwide Superstar Singer, Dancer and Performer</h3> 
      <p>Billie Jean</p>
      <br>
      <hr>
    </div>
    <div class="aboutInfo">
      <img src="jackson_5.jpg" height="150">
      <a href="www.jackson5.com" target="_blank"><h3><em>The Jackson 5</em> 
      </h3></a>
      <h3>Worldwide Famous R and B Group</h3> 
      <p>ABC</p>
      <br>
      <hr>
    </div>
  </table>

  <h2 class="toggleSinger"><span class="title">Diana Ross</span></h2>
  <table >
    <div class="aboutInfo">
      <img src="diana_ross.jpg" height="150">
      <a href="www.dianaross.com" target="_blank"><h3><em>The Original 
      Diva</em></h3></a>
      <h3>Worldwide Superstar Singer</h3> 
      <p>I'm coming out</p>
      <br>
      <hr>
    </div>
    <div class="aboutInfo">
      <img src="diana_ross.jpg" height="150">
      <a href="www.dianaross.com" target="_blank"><h3><em>The Supremes</em> 
      </h3></a>
      <h3>Worldwide Famous Girl Group</h3> 
      <p>Stop in the name of love</p>
      <br>
      <hr>
    </div>
  </table>

  <h2 class="toggleSinger"><span class="title">Lionel Richie</span></h2>
  <table >
    <div class="aboutInfo">
      <img src="lionel_richie.jpg" height="150">
      <a href="www.lionelrichie.com" target="_blank"><h3><em></em></h3></a>
      <h3>Worldwide Superstar Singer and Pianist</h3> 
      <p>All night long</p>
      <br>
      &lt

answered question

$('hr:last-child').remove();?

1 Answer

10

If you're trying to remove the last HR on each table you don't need the for loop, try this.

$("table").each(function(){ $(this).find("hr").last().remove(); });

posted this

Have an answer?

JD

Please login first before posting an answer.