如何使用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>

函数addMore（）{
$（“#介绍框”）。附加（“”）；
}

在这里，我首先需要一个文本字段和

+

按钮。当用户单击第一个文本字段下方的加号（

+

）按钮时，将创建一个具有不同id的新文本字段（

，即-introlabelname2

），并创建一个加号、减号按钮，第一个文本字段将保留减号按钮。假设用户单击第二个文本字段的减号按钮，该字段将被删除，加号按钮将保留在第一个文本字段中，依此类推。这是我的名片。请帮帮我。

读一下这个

现在，您想要创建一个具有不同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++;
}

另一个脚本标记：

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++;
}

document.getElementByid（“btn”）.addEventListener（“单击”，添加（），false）；
函数add（）{
var id=“identity”+n.toString（）；
//将n转换为字符串并将其添加到标识
document.getElementByTagName（“div”）.innerHTML+=“”；
n++；
}

我没有测试这个代码。但是您可以尝试类似的方法。

使用

.ready（）

，在

.ready（）

处理程序中定义

addMore

函数；替换

。单击（）属性事件处理程序
onclick
；将
单击
事件附加到
#减
元素；在单击两个
#plus
，
#minus
元素时，选中
.length
“[name=introllabelname]”

元素的

.length

；如果元素

.length

不大于

1

，则将布尔结果传递给

.toggle（）；单击
#减号
元素，删除最后一个
“[name=introllabelname]”
元素；用
id=“introlabelname”


你好
//代码在这里
$（函数（）{
函数切换（）{
$（“#减”）。切换（$（“[name=introllabelname]”）。长度>1）；
}
函数addMore（）{
$（“#介绍框”）。附加（“”）；
切换（）
}
函数removeOne（）{
$（“[name=introlabelname]”。last（）.remove（）
切换（）
}
$（“#加”）。单击（添加更多）；
$（“#减”）。单击（删除一个）
})

plnkr
我认为这应该有帮助

使用您要求的“+”-”按钮外观进行编辑：



你好
函数addMore（i）{
$（“#plus”）.remove（）；
$（'#介绍框'）。附加（''+
'' +
' ');
}
功能移除此（j）{
$（#introlabelname“+j）.remove（）；
$（“#减”+j）.remove（）；
}
同样的事情，使用。注意HTML的更改，添加一个
div
，将要克隆的元素标识为“模板”，并删除onclick


函数init（）{
$（文档）.on（'click'，'.btn success'，function（）{
var clone=$（“#模板”）.clone（）；
$（“#介绍框”）.append（克隆）；
clone.find（'.btn danger'）.show（）；
});
$（文档）.on（'click'，'.btn danger'，函数（）{
$（this.parent（）.remove（）；
});
}
美元（初始）

和/或的可能重复和/或我的问题与那篇文章有点不同。不，我唯一的问题是把
+和-
按钮放在正确的位置。我已经有了plunkr代码。你所说的“将
+
和
-
按钮放在适当的位置”是什么意思？我在帖子中已经解释过了。每个文本字段id都是相同的。@subhra请参阅更新的帖子。删除了对
addMore（）
的初始调用，但未单击此处使用引导的目的是什么？@Tibrogargan问题中提供的是引导。引导代码与问题无关（在非现场代码中，而不是问题中）-它所做的只是模糊您的答案，另外，我认为这可能导致您的代码段失败。@Tibrogargan请阅读问题，他知道如何附加和删除DOM元素。在这里，我首先需要一个文本字段和+按钮。当用户单击第一个文本字段下方的加号（+）按钮时，将创建一个具有不同id（即introlabelname2）的新文本字段，并创建一个加号、减号按钮，第一个文本字段将保留减号按钮。假设用户单击第二个文本字段的减号按钮，该字段将被删除，加号按钮将保留在第一个文本字段中，依此类推。也许您没有注意到我回答了这个问题。您的代码段仍在抛出错误@Tibrogargan:单击第一个
+
按钮后，第二个文本字段将创建
-
按钮应保留在第一个文本字段中。@subhra您的要求非常不清楚。你没有给出减号按钮应该做什么的指示，而有多个加号按钮做完全相同的事情是不好的设计，我真的不想在这方面投入更多的精力。你在这里要求的改变很容易做到。现在是您编写自己的代码的时候了。