动态增加删除
删除 动态 增加
2023-09-11 14:17:23 时间
<style type="text/css">
.x-j-ul{
}
.x-j-btn{
width: 25px;
height: 25px;
border-radius: 50%;
border: 1px solid #525252;
color: #525252;
cursor: pointer;
}
.x-j-ul>li:last-child{
margin-bottom: 0;
}
.x-j-ul>li:first-child .change-no{
display: none;
}
/*.x-j-btn:not(.change-no)*/
</style>
</head>
<body>
<!-- Top content -->
<!-- 分界线+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
<div class="ly-css clearfix col-sm-12">
<div class="ly-box">
<ul class="x-j-ul">
<li class="flexa mb20">
<div class="triangle-box mr20">
<select class="w100">
<option disabled value="-">请选择</option>
<option value="1" class="s">option1</option>
<option value="2" class="s">option2</option>
</select>
<i></i>
</div>
<div class="triangle-box mr20">
<select class="w100">
<option disabled value="-">请选择</option>
<option value="1" class="s">option1</option>
<option value="2" class="s">option2</option>
</select>
<i></i>
</div>
<input class="w200" type="text">
<div class="x-j-btn change-no flexca ml15" data-bind="1">-</div>
<div class="x-j-btn flexca ml15" data-bind="2">+</div>
</li>
</ul>
</div>
</div>
<!-- Javascript -->
<script src="../static/js/jquery.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script >
$(document).ready(function() {
$(document).on("click",".x-j-btn",function() {//修改成这样的写法
var indexChe = $(this).data().bind;
var str = '';
if (indexChe == 2 && $('.x-j-ul').find('li').length < 10) {
str += '<li class="flexa mb15">';
str += $(this).parent().html();
str += ' </li>';
$('.x-j-ul li:last').after(str);
} else if (indexChe == 1) {
$(this).parent().remove();
}
})
})
</script>
<!-- 分界线+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
</body>
相关文章
- js+jquery动态设置/添加/删除/获取元素属性的两种方法集锦对照(动态onclick属性设置+动态title设置)
- Mybatis批量更新,批量删除
- ElasticSearch5.x 删除数据
- 如何通过简单的3步恢复Windows 7同时删除Ubuntu
- SAP WM中阶为多个TR创建了Group后将TR从Group里删除?
- 使用 Nodejs 删除 MySQL 中的记录
- js动态添加script脚本、检测script脚本、删除script脚本
- 180、【动态规划】leetcode ——583. 两个字符串的删除操作:两种动态规划思路(C++版本)
- GridView编辑删除操作
- 数据文件——之重命名或删除文件
- 删除文件夹