动态增加删除
Posted ThisCall
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了动态增加删除相关的知识，希望对你有一定的参考价值。
<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>
以上是关于动态增加删除的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 jquery 从 asp.net 视图模型中动态删除行而不删除集合中的其余下一个对象
关于js动态增加删除textarea的问题，增加可以，删除不行。用input控制可以，用herf控制不行！
Windows 使用Button动态给ListView控件增加和删除一行