我需要一个帮助。我需要在Javascript / Jquery中使用按钮单击添加子元素。我正在解释下面的代码。
<div class="form-group" id="intro-box">
<input type="text" style="width:85%;float:left; margin-bottom:5px;" class="form-control" id="introlabelname" name="introlabelname1" placeholder="Label Name" value="">
<input type="button" class="btn btn-success btn-sm" name="minus" id="plus" value="+" style="font-size:21px; line-height:12px; border-radius:4px; margin-right:2px;margin-left:2px;margin-top:6px;" onclick="addMore();">
<input type="button" class="btn btn-danger btn-sm" name="minus" id="minus" value="-" style="font-size:21px; line-height:12px; border-radius:4px; margin-right:2px;margin-left:2px;margin-top:6px;display:none;">
</div>
<script>
function addMore(){
$('#intro-box').append('<input type="text" style="width:85%;float:left; margin-bottom:5px;" class="form-control" id="introlabelname" name="introlabelname" placeholder="Label Name" value="">');
}
</script>
我需要，最初需要一个文本字段和+按钮。当用户点击第一个文本字段下方的加号（+）按钮时，将使用不同的ID（i.e-introlabelname2）创建一个新文本字段，并创建一个加号，减号按钮，第一个文本字段将保留用减号按钮。假设用户将单击特定字段将擦除的第二个文本字段的减号按钮，再次加上按钮将保留第一个文本字段，依此类推。这是我的plunkr code。请帮帮我。
答案 0 :(得分：3)
我认为这应该有帮助
编辑了＆＃39; +＆＃39; ＆＃39; - ＆＃39;你要求的按钮：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<h1>Hello</h1>
<div class="form-group" id="intro-box">
<input type="text" style="width:85%;float:left;margin-bottom:5px;" class="form-control" id="introlabelname0" name="introlabelname" placeholder="Label Name" value="">
<input type="button" class="btn btn-success btn-sm" name="plus" id="plus" value="+" style="font-size:21px; line-height:12px; border-radius:4px; margin:3px; margin-bottom:6px;" onclick="addMore(1);">
</div>
<script>
function addMore(i) {
$("#plus").remove();
$('#intro-box').append('<div><input type="text" style="width:85%;float:left; margin-bottom:5px;" class="form-control" id="introlabelname' + i + '" name="introlabelname" placeholder="Label Name" value="">' +
'<input type="button" onclick="removeThis(' + i + ');" class="btn btn-danger btn-sm" name="minus" id="minus' + i + '" value="-" style="font-size:21px; line-height:12px; border-radius:4px; margin:3px; margin-bottom:6px;"></div>' +
'<div> <input type="button" class="btn btn-success btn-sm" name="plus" id="plus" value="+" style="font-size:21px; line-height:12px; border-radius:4px; margin:3px; margin-bottom:6px;" onclick="addMore(' + (i++) + ');"></div>');
}
function removeThis(j) {
$("#introlabelname" + j).remove();
$("#minus" + j).remove();
}
</script>
</body>
</html>
答案 1 :(得分：2)
同样的事情，使用.clone()。请注意对HTML的更改，以添加div，以标识要克隆为＆＃34;模板的元素＆＃34;并删除您的onclick
function init() {
$(document).on('click', '.btn-success', function() {
var clone = $('#template').clone();
$('#intro-box').append(clone);
clone.find('.btn-danger').show();
});
$(document).on('click', '.btn-danger', function() {
$(this).parent().remove();
});
}
$(init);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="form-group" id="intro-box">
<div id="template">
<input type="text" style="width:85%;float:left; margin-bottom:5px;" class="form-control" id="introlabelname" name="introlabelname1" placeholder="Label Name" value="">
<input type="button" class="btn btn-success btn-sm" name="minus" id="plus" value="+" style="font-size:21px; line-height:12px; border-radius:4px; margin-right:2px;margin-left:2px;margin-top:6px;">
<input type="button" class="btn btn-danger btn-sm" name="minus" id="minus" value="-" style="font-size:21px; line-height:12px; border-radius:4px; margin-right:2px;margin-left:2px;margin-top:6px;display:none;">
</div>
</div>
</body>
答案 2 :(得分：0)
使用.ready()，在addMore处理程序中定义.ready()函数;替换.click()用于属性事件处理程序onclick;将click事件附加到#minus元素;点击.length，"[name=introlabelname]"元素，检查#plus个#minus个元素;如果点击.toggle()按钮时元素#minus不大于.length，则将布尔结果传递给1 #minus按钮;点击"[name=introlabelname]"元素删除上一个#minus元素;将class="form-control introlabelname"替换为id="introlabelname"
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link data-require="bootstrap@*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<script data-require="bootstrap@*" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Hello</h1>
<div class="form-group" id="intro-box">
<input type="text" style="width:85%;float:left; margin-bottom:5px;" class="form-control introlabelname" name="introlabelname" placeholder="Label Name" value="">
<input type="button" class="btn btn-success btn-sm" name="minus" id="plus" value="+" style="font-size:21px; line-height:12px; border-radius:4px; margin-right:2px;margin-left:2px;margin-top:6px;">
<input type="button" class="btn btn-danger btn-sm" name="minus" id="minus" value="-" style="font-size:21px; line-height:12px; border-radius:4px; margin-right:2px;margin-left:2px;margin-top:6px;display:none;">
</div>
<script>
// Code goes here
$(function() {
function toggle() {
$("#minus").toggle($("[name=introlabelname]").length > 1);
}
function addMore() {
$('#intro-box').append('<input type="text" style="width:85%;float:left; margin-bottom:5px;" class="form-control introlabelname" name="introlabelname" placeholder="Label Name" value="">');
toggle()
}
function removeOne() {
$("[name=introlabelname]").last().remove()
toggle()
}
$("#plus").click(addMore);
$("#minus").click(removeOne)
})
</script>
</body>
</html>
答案 3 :(得分：-1)
阅读此http://www.w3schools.com/howto/howto_js_todolist.asp
现在您要创建一个具有不同ID的输入字段，您可以设置一个新变量来执行此操作。
例如：
一个脚本标记：
var n=1;
另一个脚本标记：
document.getElementByid("btn").addEventListener("click",add(),false);
function add(){
var id="identity"+n.toString();
//converts n to string and adds it to identity
document.getElementByTagName("div").innerHTML+="<input type='text' id='"+id+"'/>";
n++;
}
我没有测试这段代码。但你尝试类似的东西。