如何从div中删除最后一个元素？答案

【问题标题】：How to remove last element from div?如何从div中删除最后一个元素？
【发布时间】：2015-05-27 20:53:21
【问题描述】：

我有描述列表，删除其中一个后，我想从 div 中删除最后一个元素，而不是刷新站点。我其实不懂javascript，所以我想问一下我的destroy.js.erb应该是什么样子的？我可以使用

刷新整个班级的“描述”

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

但我很感兴趣，如果有办法只删除最后一个元素。

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

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

感谢您的帮助

【问题讨论】：

$('.descriptions').last().remove() ??
它也删除了整个 div
document.querySelector('.descriptions > :last-child').remove();? （对于最近的浏览器，假设您只有一个 .descriptions 元素）
@adolzi，正如其他人建议的那样，您可以使用:last-child。

标签： javascript ruby-on-rails

【解决方案1】：

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

以下 jQuery 行将删除“Item 3”。

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

【讨论】：

如果我们想从底部删除多个孩子怎么办？
我找到了这个帖子，好像它回答了你的问题。 stackoverflow.com/questions/6623445/…
如何删除父 div？
嘿，只是 $('.parent').remove();适用于上面的示例。但是，删除父级也会删除父级中包含的所有子级。

【解决方案2】：

使用 css 选择器 :last-child 将其删除（找到 here）。然后使用 jQuery 删除最后一个元素。

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

这里是jsFiddle 示例：

html:

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

JavaScript：

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

【讨论】：

【解决方案3】：

如果你想删除最后一个 div，使用这个：

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

如果您想删除某个 id 为“#mydiv”的 div 的最后一个兄弟，请使用此选项

$('#mydiv:last-child')

【讨论】：

对:last-child的误解。也许这篇关于:last-child 的文章对你有帮助。 :)

【解决方案4】：

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

以下是删除最后一个子项 3 的 JQuery 代码

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

或者你也可以使用

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

【讨论】：

这是错误的。首先，.remove() 删除所有匹配的元素，因此它会删除每个子元素，但是您的示例标记也是无效的（多个相同的 ID），即使在这种情况下也不正确，因为它只删除了第一个子元素。