JQuery is the best solution to remove <dt> and <dd>

I have this HTML source:

<dl class="plain inlineDataList userStats">
    <dt><a href="someUrl">Test1</a></dt>
    <dd>2.710</dd>

    <dt><a href="anotherUrl">Test2</a></dt>
    <dd>408</dd>

    <dt>Test3</dt>
    <dd>2.693</dd>
</dl>

      

Now I am trying to remove the last two. In the end, it should look like this:

<dl class="plain inlineDataList userStats">
    <dt><a href="someUrl">Test1</a></dt>
    <dd>2.710</dd>

    <dt><a href="anotherUrl">Test2</a></dt>
    <dd>408</dd>
</dl>

      

The last dt and dd should be removed / removed. My current idea:

$('dl.plain.userStats > dd:last-child').remove();
$('dl.plain.userStats > dt:last-child').remove();

      

This works, but I think there are better solutions, also I think I understand the wrong last child as it actually removes the last element, no matter what it is.

When I do $ ('dl.plain.userStats> bla: last-child'). remove (); it also works. Do you have any better solutions for this or is there maybe even normal?

thank

+3


source to share


1 answer


I think I understand the wrong behavior of the last child as it actually removes the last element, it doesn't matter what it is.

Not.

$('dl.plain.userStats > dd:last-child')

will only remove the last one dd

, which is also the last child dl.plain.userStats

.

$ ('dl.plain.userStats> bla: last-child'). remove (); it also works.

Not.

$('dl.plain.userStats > bla:last-child').remove();

won't delete the last dt

one if yours is bla

notdt



Consider this example: http://jsbin.com/huqeketiya/1/edit

  <a>
  <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>
   <span>5</span>
  </a>

      

This code:

 $("div:last-child" ).css('background-color','red')

      

Draws nothing!

as i said: it searches div

which is also the last one so there is no result here

+2


source







All Articles