problem description
JQ how to nest dynamic delete and add input boxes, but click on the first layer to add and delete input boxes are both OK. Now the problem is to set up one layer.
related codes
< html >
< head >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQinput</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
<style>
.spot{float: left;width:200px;height: 40px;}
</style> < / head >
< body >
<input type="button" id="" value=""/>
<div id="spots">
<input type="text" name="" placeholder="">
<input type="button" id="add" name="add" value=""/>
<input type="button" id="del" name="del" value=""/><br/>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("input-sharpadd").click(function () {
$("div-sharpspots").append(
"<div class="spot">" +
"<input type="text" name="ckname" /> " +
"<i class="fa fa-minus-circle" id="del" style="cursor:pointer;color:-sharpFF1F1F"></i>" +
"</div>"
)
.find("i-sharpdel").click(function () {
$(this).parent().remove();
});
});
$("input-sharpdel").click(function () {
$("div-sharpspots").remove();
});
})
</script> < / body >
< / html >
the result I hope is this
