How to remove last element from div?

Question

I have list of descriptions and after remove one of them, I'd like to remove last element from div, not refreshing site. I don't know javascript in fact, so I'd like to ask how should my destroy.js.erb looks like? I can refresh whole class "descriptions" using

$('.descriptions').load(location.href + " .descriptions");

but I'm interested, if there is way to remove only last element.

  <div class="descriptions">
       <%= render @descriptions %> 
  </div>

 //_description.html.erb
 <div class="description-field">
        <%= @description.text %>
 </div>

Thank you for any help

`document.querySelector('.descriptions > :last-child').remove();`? (For recent browsers, and assuming you only have one `.descriptions` element) — , May 27 '15 at 21:03
@adolzi, as others are suggesting, you can use `:last-child`. — Tahir Ahmed, May 27 '15 at 21:05

Cliff Gunn · Accepted Answer · 2015-05-27T21:09:53.993

22

<div class="parent">
    <div class="child">
        Item 1
    </div>
    <div class="child">
        Item 2
    </div>
    <div class="child">
        Item 3
    </div>
</div>

The following line of jQuery would delete "Item 3."

$('.parent').children().last().remove();

edited May 27 '15 at 21:09

answered May 27 '15 at 21:04

Cliff Gunn

458
2
7

1

What if we want to delete more than one children from bottom? – HexaCrop Apr 23 '18 at 10:30
I found this thread, which seems like it answers your question. https://stackoverflow.com/questions/6623445/remove-3-last-divs-with-jquery – Cliff Gunn Apr 25 '18 at 16:31
How would I delete the parent div? – mcdonalds291 May 27 '21 at 00:45
Hey, just $('.parent').remove(); would work for the example above. However, removing the parent would also remove all children contained in the parent. – Cliff Gunn Jun 01 '21 at 15:04

Luka Krajnc · Answer 2 · 2015-05-27T21:09:42.013

2

Use css selector :last-child to remove it (found here). Then use jQuery to remove last element.

$(".yourdiv :last-child").remove();

Here is jsFiddle example:

html:

<div>
    <p> Hello </p>
    <p> World </p>
    <p> last element </p>
</div>

JavaScript:

$("div :last-child").remove();

edited May 27 '15 at 21:09

answered May 27 '15 at 20:56

Luka Krajnc

915
1
7
21

zeppelin · Answer 3 · 2018-03-21T14:30:16.237

0

Use this if you want to remove the last div:

$("div:last").remove();

Use this if you want to remove the last sibling of some div with id "#mydiv"

$('#mydiv:last-child')

edited Mar 21 '18 at 14:30

answered May 27 '15 at 21:01

zeppelin

451
1
4
24

1

Misunderstanding of `:last-child`. Maybe this article about [:last-child](https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child) helps you. :) – Dennis98 Oct 25 '16 at 11:21

score -1 · Answer 4 · answered Oct 05 '18 at 09:06

-1

<div id="parent">
    <div id="child">
        Item 1
    </div>
    <div id="child">
        Item 2
    </div>
    <div id="child">
        Item 3
    </div>
</div>

The following is a JQuery code that removes the last child item 3

$("#child").remove();

or you can also use

$("#child").css({"display": "none"});

answered Oct 05 '18 at 09:06

Brian Ombisa

51
8

This is just wrong. First, `.remove()` removes all matched elements, so it would remove every child, BUT your example markup is also invalid (multiple same IDs) and even in this case it's not correct, as it removes only the first child then. – Dennis98 Oct 11 '18 at 21:01

How to remove last element from div?

4 Answers4

Linked

Related