Question

我想动态添加文本框，以便添加的每个文本框显示为列表中的最后一个但位于按钮上方。我还想要一个允许删除每个文本框的按钮。下面的代码按我的意愿添加文本框，但是当单击“删除字段”时，只删除该文本。与该文本关联的文本框仍然存在。如果我不使用“insertBefore”，这可以工作，所以我认为弄乱了“removeLink”知道要删除的内容吗？

<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>

Answer 1

由于您已经标记了jQuery，我建议您使用它来显着简化代码。

首先，修复您的HTML，以便<ul>的所有孩子都是<li>标签，如下所示：

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

然后，您可以使用这个更简单的版本替换整个listNames()函数，而这个版本没有您的问题。我使用.closest("li")方法查找要删除的父<li>标记，无论它上面有多少个父项，这有助于防止简单错误或依赖于确切的HTML布局（例如，它使代码更少脆弱或容易出错：

<script>
var nameCount = 0;

function listNames() {
    var id = "txtName" + nameCount;
    var li = $("<li>");
    $("<input/>", {type: "text", name: id, id: id}).appendTo(li);
    $("<a>Remove Field</a>").click(function() {
        $(this).closest("li").remove();
    }).appendTo(li);
    li.insertBefore("#fields li:last");
    nameCount++;
}
</script>

工作演示：http://jsfiddle.net/jfriend00/tjb24/

正如我在演示链接中所示，您还可以从HTML中删除onclick处理程序，并使用事件侦听器连接到它，否则称为unobtrusive javascript来自javascript的HTML。

如果您仍然希望使用普通的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>

工作演示：http://jsfiddle.net/jfriend00/gTWqu/

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

1 个答案: