删除最后一项jquery
Remove last item jquery
单击一个按钮,结果会附加到另一个div,每次单击的总数都会增加。
当单击Remove Last按钮时,它会删除附加的div,但不会调整总数。
我到处寻找一个没有运气的功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Remove last</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body onLoad="renderTime();">
<div class="container-fluid">
<div class="row">
<div class="col-xs-4" id="printarea" >
<div id="print-container">
<div class="item"></div>
<div class="total"></div>
</div>
</div>
<div class="col-xs-8">
<ul class="final">
<li class="remove"><a href="#"><input type="submit" value="Remove Last" class="print-btn remove-item"></a></li>
<li class="remove"><a href="#"><input type="submit" value="Remove All" class="print-btn" data-corners="false" id="submit" onclick="refresh()"></a></li>
</ul>
<hr />
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="content">
<ul class="sub-menu">
<li><a href="#"><button class="menu item1">Item 1</button></a></li>
<li><a href="#"><button class="menu item2">Item 2</button></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
//add item
$('.item1').click(function(){
$('<div class="delete">Item 1 - <span class="skill"> 840</span></div><br />').appendTo('.item');
counter();
});
$('.item2').click(function(){
$('<div class="delete">Item 2 - <span class="skill"> 910</span></div><br />').appendTo('.item');
counter();
});
//remove last item
$('.remove-item').click(function(){
$(".delete:last").remove();
});
</script>
<script type="text/javascript">
function refresh() {
setTimeout(function () {
location.reload()
}, 100);
}
</script>
<script type="text/javascript">
var counter = function() {
var total = 0;
$(".skill").each(function() {
total += +$(this).text();
});
$('.total').text('Total: ' + total);
};
</script>
</body>
</html>
删除元素后,需要调用counter();
方法。
//remove last item
$('.remove-item').click(function() {
$(".delete:last").remove();
counter();
});
这是因为删除元素后并没有调用counter函数。您需要在删除项目点击处理程序中调用它:
$('.remove-item').click(function(){
$(".delete:last").remove();
counter();
});
在计算总数之前,您还应该在获取文本时解析这些值:
var total = 0;
$(".skill").each(function() {
total += + parseInt($(this).text() , 10);
});
$('.total').text('Total: ' + total);
相关文章:
- 如何从对象数组中获取最后一项
- 为什么只有最后一项显示,而不是全部显示
- 单击下拉项-jquery上的事件
- 删除最后一项jquery
- jQuery只附加最后一项
- 将 html 更改为数组中的下一项 - jquery
- 通过jQuery在最后一项之后插入
- 可以'不要在jquery上使用上一项和下一项链接
- jQuery从选定项中获取上一项或下一项
- 只有在最后一项完成后,才能运行jQuery slideDown complete函数
- Jquery Accordion幻灯片删除上一项时的下一个标题
- 上一项的Jquery切换类
- JQuery 从 data() 数组中获取最后一项的旁边
- 在Angular数组上使用splice()时,jQuery选择器跳转到下一项
- jquery-csv使用toArrays()时遗漏了csv-file的最后一项
- jquery只切换一项
- 使用jquery单击时显示第一项并显示/隐藏另一项
- jQuery在每个函数中只绑定到最后一项
- jQuery每次重复上一项两次
- 如何在jquery中插入foreach后的最后一项