我需要一位帮助。我需要使用 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
)并且将创建一个加号、减号按钮,并且第一个文本字段将保留减号按钮。假设用户将单击第二个文本字段的减号按钮,该特定字段将被删除,而加号按钮将保留在第一个文本字段中,依此类推。这是我的笨蛋代码 https://plnkr.co/edit/vU9km6xf6yOYCu5AcNEt?p=preview。请帮我。
我认为这应该有帮助
使用您要求的“+”“-”按钮进行编辑:
<!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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)