如何使用 Javascript/Jquery 添加子元素
[英]How to add child element using Javascript/Jquery
问题描述
我需要一个帮助。 我需要使用 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（ ie-introlabelname2 ）的新文本字段，并创建一个加号、减号按钮，第一个文本字段将保留减号按钮。 假设用户将单击第二个文本字段的减号按钮，该特定字段将被删除，并且加号按钮将保留在第一个文本字段中，依此类推。 这是我的plunkr 代码。 请帮我。
4 个解决方案
解决方案1
3 2016-10-15 07:14:09
我认为这应该有帮助
使用您要求的“+”“-”按钮进行编辑：
<!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>
解决方案2
2 2016-10-15 07:23:46
同样的事情，使用.clone() 。 请注意对 HTML 的更改以添加一个div ，该div将要克隆的元素标识为“模板”并删除您的 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>
解决方案3
0 2016-10-15 07:06:20
使用.ready() ，在.ready()处理程序中定义addMore函数； 将.click()替换为属性事件处理程序onclick ； 将click事件附加到#minus元素； 检查.length的"[name=introlabelname]"在两者的点击元素#plus ， #minus元件; 将布尔结果传递给.toggle() #minus按钮，如果元素.length在#minus按钮上单击时不大于1 ； 单击#minus元素时删除最后一个"[name=introlabelname]"元素； 用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>
解决方案4
-1 2016-10-15 07:04:30
阅读这个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++;
}
我没有测试这段代码。 但是你尝试类似的东西。
如何在纯 Javascript 而非 jQuery 中向具有 ul 子元素的 li 元素添加类
[英]How to add a class to li element which has a ul child element in pure Javascript not jQuery
如何使用jQuery将样式表和javascript文件动态添加到div元素
[英]how to dynamically add stylesheet and javascript files to a div element using jquery
如何检查元素的父元素本身是否是使用javascript或jquery的最后一个子元素
[英]How to check if the parent element of an element is in itself the last child with javascript or jquery
如何判断一个元素是否是JavaScript中另一个元素的子元素（没有jQuery）？
[英]How to tell if an element is a child of another element in JavaScript (no jQuery)?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何使用jQuery和JavaScript将类添加到元素？
如何使用 Javascript 将 Class 添加到父元素的子元素
如何在纯 Javascript 而非 jQuery 中向具有 ul 子元素的 li 元素添加类
如何使用jQuery或Javascript添加元素
如何使用jQuery将样式表和javascript文件动态添加到div元素
如何检查元素的父元素本身是否是使用javascript或jquery的最后一个子元素
如何判断一个元素是否是JavaScript中另一个元素的子元素（没有jQuery）？
如何使用JQuery使子元素的内容可编辑
如何使用jQuery检测子元素？
如何使用jQuery选择单个子元素？
相关标签