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

Question

为什么jQuery remove（）在这种特殊情况下不起作用，我如何达到预期效果（删除最后的div.progress）。我使用的是jQuery 3.2.1。点击事件被触发，我检查了。

HTML：

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

JS：

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

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

OR

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

Answer 1

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

Answer 2

没有什么错$('.progress-bar .progress:last').remove();

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

也许你的事件不触发。

尝试这样的结合事件，（最佳实践）

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

Answer 3

只需使用：

<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

Answer 4

这里是的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）

我要评论下一次..但我没有足够的声誉。