在我的表单中,我有一个名为 Add Record
的 href,单击它会向表单添加新的 html 元素行。添加的 html 元素行具有 remove
和 add
href。单击该行末尾的 remove
后,该特定行将被删除...但是,当我单击子元素上的 add
时,会出现一个新行没有被创建。
$(document).ready(function(e) {
var html = '<div><label>Category:</label><select id="childcategory"><option value="0" selected>Select Category</option><option value="CatA">Category A</option><option value="CatB">Category B</option></select><a href="#" id="remove">Remove</a><a href="#" id="childAdd">AddRecord</a></div>';
var maxRows = 20;
var x = 1;
//Add rows
$("#add").click(function(e) {
if (x <= maxRows) {
$("#container").append(html);
x++;
}
})
/*//Add rows
$("#container").on('click', '#childAdd', function(e){
$(this).parent('div').add();
x++;
})
})*/
//Remove rows
$("#container").on('click', '#remove', function(e) {
$(this).parent('div').remove();
x--;
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div id="container" class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="main-content">
<div class="block">
<label>Category:</label>
<select id="category" name="category[]" required>
<option value="0" selected>Select Category</option>
<option value="ToiletSoap">Toilet Soap</option>
<option value="ToothPaste">ToothPaste</option>
</select>
<a href="#" id="add">Add record</a>
</div>
</div>
</div>
</div>
</div>
</form>
最佳答案
您可以使用相同的函数来添加记录
,我希望这是您期望的输出,如果不是请评论,我会更新
$(document).ready(function(e) {
var html = '<div><label>Category:</label><select id="childcategory"><option value="0" selected>Select Category</option><option value="CatA">Category A</option><option value="CatB">Category B</option></select><a href="#" id="remove">Remove</a><a href="#" id="childAdd">AddRecord</a></div>';
var maxRows = 20;
var x = 1;
//Add rows
$("form").on('click','#add, #childAdd', function(e) {
if (x <= maxRows) {
$("#container").append(html);
x++;
}
})
//Remove rows
$("#container").on('click', '#remove', function(e) {
$(this).parent('div').remove();
x--;
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div id="container" class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="main-content">
<div class="block">
<label>Category:</label>
<select id="category" name="category[]" required>
<option value="0" selected>Select Category</option>
<option value="ToiletSoap">Toilet Soap</option>
<option value="ToothPaste">ToothPaste</option>
</select>
<a href="#" id="add">Add record</a>
</div>
</div>
</div>
</div>
</div>
</form>
关于JavaScript - 添加和删除 div onclick 子 href,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51530926/