Javascript 动态插入元素，以便仍可以删除它们_Javascript_Jquery_Html

Javascript 动态插入元素，以便仍可以删除它们

javascript jquery html

Javascript 动态插入元素，以便仍可以删除它们,javascript,jquery,html,Javascript,Jquery,Html,我想动态添加文本框，以便添加的每个文本框都显示为列表中最后一个文本框，但位于按钮上方。我还想要一个按钮，允许删除每个文本框。下面的代码添加了我想要的文本框，但是当点击“删除字段”时，只有文本被删除。与该文本关联的文本框将保留。如果我不使用“insertBefore”，这是可行的，所以我想这会弄乱“removalLink”知道删除什么 <script> var namesCount = 0; listNames = function (){ var field_area = d

我想动态添加文本框，以便添加的每个文本框都显示为列表中最后一个文本框，但位于按钮上方。我还想要一个按钮，允许删除每个文本框。下面的代码添加了我想要的文本框，但是当点击“删除字段”时，只有文本被删除。与该文本关联的文本框将保留。如果我不使用“insertBefore”，这是可行的，所以我想这会弄乱“removalLink”知道删除什么

<script>
var namesCount = 0;

listNames = function (){

  var field_area = document.getElementById("fields");
  var li = document.createElement("li");

  var input = document.createElement("input");
  input.id = "txtName"+namesCount;
  input.name = "txtName"+namesCount;
  input.type = "text";
  li.appendChild(input);
  field_area.appendChild(li);

  //INSERT ELEMENT JUST BEFORE ADD BUTTON
  sp2 = document.getElementById("btnNames");
  parentDiv = sp2.parentNode;
  parentDiv.insertBefore(input, sp2);

  //create the removal link
  var removalLink = document.createElement("a");
  removalLink.onclick = function(){
    this.parentNode.parentNode.removeChild(this.parentNode)
  }
  var removalText = document.createTextNode("Remove Field");
  removalLink.appendChild(removalText);
  li.appendChild(removalLink);
  field_area.appendChild(li);

  //INSERT ELEMENT JUST BEFORE ADD BUTTON
  var sp2 = document.getElementById("btnNames");
  var parentDiv = sp2.parentNode;
  parentDiv.insertBefore(div, sp2);

  namesCount++
}

</script>

<body>
  <ul id="fields">
    <a href="#" id="btnNames" onclick="listNames()">Add More Names</a>
  </ul>
</body>


var namesCount=0；
listNames=函数（）{
var field_area=document.getElementById（“字段”）；
var li=document.createElement（“li”）；
var输入=document.createElement（“输入”）；
input.id=“txtName”+名称计数；
input.name=“txtName”+名称计数；
input.type=“text”；
li.追加子项（输入）；
场区面积（li）；
//在“添加”按钮之前插入元素
sp2=document.getElementById（“btnNames”）；
parentDiv=sp2.parentNode；
parentDiv.insertBefore（输入，sp2）；
//创建删除链接
var removalLink=document.createElement（“a”）；
removalLink.onclick=函数（）{
this.parentNode.parentNode.removeChild（this.parentNode）
}
var removalText=document.createTextNode（“删除字段”）；
appendChild（removalText）；
li.appendChild（removalLink）；
场区面积（li）；
//在“添加”按钮之前插入元素
var sp2=document.getElementById（“btnNames”）；
var parentDiv=sp2.parentNode；
parentDiv.insertBefore（div，sp2）；
名称计数++
}

既然您已经标记了jQuery，我建议使用它来显著简化代码

首先，修复HTML，使

的所有子项都是

标记，如下所示：

  <ul id="fields">
    <li><a href="#" id="btnNames" onclick="listNames()">Add More Names</a></li>
  </ul>

工作演示：

正如我在演示链接中所展示的，您还可以从HTML中去掉

onclick

处理程序，只需使用事件侦听器将其连接起来，否则称为将HTML与javascript分离的地方

如果您仍然希望全部使用纯javascript，可以执行以下操作：

<ul id="fields">
     <li id="fieldAdd><a href="#" id="btnNames">Add More Names</a></li>
</ul>

<script>
var nameCount = 0;

document.getElementById("btnNames").addEventListener("click", function(e) {
    var id = "txtName" + nameCount;
    var li = document.createElement("li");

    var input = document.createElement("input");
    input.type = "text";
    input.name = input.id = id;
    li.appendChild(input);

    var removeLink = document.createElement("a");
    removeLink.innerHTML = "Remove Field";
    removeLink.addEventListener("click", function(e) {
        this.parentNode.parentNode.removeChild(this.parentNode);
        e.preventDefault();
    });
    li.appendChild(removeLink);

    var fields = document.getElementById("fields");
    var fieldAdd = document.getElementById("fieldAdd");
    fields.insertBefore(li, fieldAdd);
    nameCount++;
    e.preventDefault();
});
</script>


您是想标记jQuery吗？我没有看到任何在这个页面上使用的，如果你有它的链接，你可以真正清理这个代码。如果您不使用它，那么我会删除它。我添加了jQuery标记，希望这可能是解决方案。我发现越来越多的jQuery、Ajax等都是比我倾向于使用的普通Javascript更好的解决方案。感谢工作演示。他们解决了我的问题。我将使用jQuery代码。
<ul id="fields">
     <li id="fieldAdd><a href="#" id="btnNames">Add More Names</a></li>
</ul>

<script>
var nameCount = 0;

document.getElementById("btnNames").addEventListener("click", function(e) {
    var id = "txtName" + nameCount;
    var li = document.createElement("li");

    var input = document.createElement("input");
    input.type = "text";
    input.name = input.id = id;
    li.appendChild(input);

    var removeLink = document.createElement("a");
    removeLink.innerHTML = "Remove Field";
    removeLink.addEventListener("click", function(e) {
        this.parentNode.parentNode.removeChild(this.parentNode);
        e.preventDefault();
    });
    li.appendChild(removeLink);

    var fields = document.getElementById("fields");
    var fieldAdd = document.getElementById("fieldAdd");
    fields.insertBefore(li, fieldAdd);
    nameCount++;
    e.preventDefault();
});
</script>