[英]JavaScript - add and remove div onclick child href
In my form I have a href called Add Record
which when clicked adds a new line of html elements to the form. 在我的表单中,我有一个名为Add Record
的href,当单击该行时,会将新的html元素行添加到表单中。 The added line of html elements has a remove
and add
href. 添加的html元素行具有remove
和add
href。 Upon clicking the remove
at the end of the line, that specific line gets removed...however, when I click on the add
on the child element, a new line is not getting created. 单击该行末尾的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>
you can use same function to add record
, I hope this is your expected out put, if not please comment, i will update 您可以使用相同的功能add record
,希望这是您预期的结果,如果没有请发表评论,我会更新
$(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>
In the code above 在上面的代码中
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) { //<--- Try using #childAdd instead of #add or change childAdd ID of href to add.
if (x <= maxRows) {
$("#container").append(html);
x++;
}
})
Because in HTML add
href, you have used id as childAdd
. 因为在HTML add
href中,您已将id用作childAdd
。
Hope this helps. 希望这可以帮助。
shouldn't this be a different DIV? 这不应该是其他DIV吗?
$("#container").append(html);
> $("#main-content").append(html); > $(“#main-content”)。append(html);
append(html)
while adding rows 您在添加行时错过了append(html)
$(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="#" class="remove">Remove</a><a href="#" class="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').append(html); console.log("child 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.