Question

为什么jQuery remove（）在这种特殊情况下不起作用，以及如何实现所需效果（删除最后一个let distanceLabelText = "\(String(distanceInMiles)) miles away"）。我正在使用jQuery 3.2.1。点击事件被触发，我查了一下。

HTML：

div.progress

JS：

<div class="progress-bar">
  <div class="progress"></div>
  <div class="progress"></div>
  <div class="progress"></div>
</div>

OR

$(".arrow-right").click(function(){
  $(".progress-bar").append( "<div class=\"progress\"></div>" );
});

$(".arrow-left").click(function(){
  $(".progress-bar .progress:last").remove();
});

Answer 1

您可以使用$('.progress-bar .progress').last().remove()

Answer 2

以下是jsfiddle的一个小例子：

以下是最低代码：您可以尝试使用

.progress-bar .progress:last  - will select the last progress on entire site
.progress-bar:last-child  - will select last child of every progressbar on the entire site
.children().last() - to select using methods

jsFiddle - selector

使用Javascript：

$(function() {
    $('.progress-bar').children().last().addClass("last");
});

HTML：

<div class="progress-bar">
<div class="progress"></div>
<div class="progress"></div>
<div class="progress"></div>
<div class="progress"></div>
<div class="progress"></div>
</div>

CSS：

.progress{
width: 100px;
height: 20px;
margin-bottom: 7px;
background-color: blue;
}

.last {
background-color: red;
}

您无法直接使用:last进行选择，您必须使用:last-child 或者一些方法来获取最后一个元素$('progress-bar').children().last()（children）

我想在下次评论..但我没有足够的声誉。

Answer 3

$('.progress-bar .progress:last').remove();

没有任何问题

https://jsfiddle.net/gvmr2Lex/4/

也许你的活动没有触发。

尝试像这样的绑定事件，（最佳实践）

$(document).on("click",".arrow-left",function(){
   $('.progress-bar .progress:last').remove();
});

Answer 4

只需使用：

<div class="progress-bar">
  <div class="progress">d</div>
  <div class="progress">d</div>
  <div class="progress">d</div>
</div>
<a href="#" class="arrow-left">
Arrow Left
</a>

$(".arrow-left").click(function(){
    $('.progress:last-child').remove();
});

Example in jsfiddle

为什么jQuery remove（）在这种特殊情况下不起作用？

4 个答案: