使用 j-query 添加多个文本框
HTML
<div class="col-md-12">
<div class="col-md-3"><label>Name</label><input type="text" class="form-control" name=""/></div>
<div class="col-md-2"><label>Count</label><input type="text" class="form-control" name=""/></div>
<div class="col-md-3"><label>Brand</label><input type="text" class="form-control" name=""/></div>
<div class="col-md-3"><label>Condition</label><input type="text" class="form-control" name=""/></div>
<div class="col-md-1" style="margin-top:30px;"><a href="javascript:void(0);" class="add" ><span class="glyphicon glyphicon-plus"></span></a></div>
<div class="contents"></div>
</div>
和脚本一样
<script>
$(document).ready(function() {
$(".add").click(function() {
$('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(".contents");
$('<div class="col-md-2"><input type="text" class="form-control" name=""/></div>').appendTo(".contents");
$('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(".contents");
$('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(".contents");
$('<div class="col-md-1"><span class="rem" ><a href="javascript:void(0);" >Remove</span></div>').appendTo(".contents");
});
});
</script>
上述查询用于添加多个正常工作的文本框,我尝试删除删除按钮中添加的项目,但只删除一个文本框,只有我正在使用此脚本
<script>
$('.contents').on('click', '.rem', function() {
$(this).parent("div").remove();
});
</script>
有什么方法可以仅删除单击的整行吗? enter image description here
最佳答案
你可以像这样重写代码。您正在删除容器,这就是问题所在
$(document).ready(function() {
$(".add").click(function() {
var container= $('<div>');
$('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(container);
$('<div class="col-md-2"><input type="text" class="form-control" name=""/></div>').appendTo(container);
$('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(container);
$('<div class="col-md-3"><input type="text" class="form-control" name=""/></div>').appendTo(container);
$('<div class="col-md-1"><span class="rem" ><a href="javascript:void(0);" >Remove</span></div>').appendTo(container);
$('.childControl').after($(container).clone());
});
$('.contents').on('click', '.rem', function() {
$(this).parent("div").parent("div").empty();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="col-md-3"><label>Name</label><input type="text" class="form-control" name=""/></div>
<div class="col-md-2"><label>Count</label><input type="text" class="form-control" name=""/></div>
<div class="col-md-3"><label>Brand</label><input type="text" class="form-control" name=""/></div>
<div class="col-md-3"><label>Condition</label><input type="text" class="form-control" name=""/></div>
<div class="col-md-1" style="margin-top:30px;"><a href="javascript:void(0);" class="add" ><span class="glyphicon glyphicon-plus"></span>Add</a></div>
<div class="contents"><div class="childControl"></div>
</div>
关于javascript - 单击时删除多个文本框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47012834/