删除孩子时，还可以删除其关联的HTML元素，而无需指定其ID

Question

我有一个程序，可以在单击按钮时添加输入框。添加该框的HTML中的一个新ID。然后将输入插入到底部显示的字符串中。输入必须具有11个字符的长度。我从我实际上的工作中简化了此代码，但这是问题：

问题： 当我添加框和输入值时，它会显示一个字符串。凉爽的。但是，当我删除一个框（并确保函数getResponse（）在此之后运行）时，我的字符串仍然显示删除的输入的值。 我希望这些值/元素在我删除JavaScript中的孩子后不存在。即使我只设置为null的值，它仍然认为该元素存在并弄乱了我的字符串。

我尝试过的

• 在运行函数以删除孩子时，设置输入为null。这是在下面的我的代码中。我还尝试将输入设置为null。不起作用，我什至不确定是否在此位置的语法中允许这样做。我认为这显然不是。即便如此，仅将值设置为null而不是完全删除元素，将在删除孩子时在我的字符串中引起问题。

• 有一个按钮以删除添加的最后一个输入而不是选择性。这会起作用，问题是我不确定如何处理我的代码设置方式。但是，这将是绝望的，因为我希望用户能够选择性地选择它们删除的输入。，但是如果这是唯一的方法，我可以使用一些建议。

• 按照以下删除元素[count]来删除元素。这将无法按照我想要的方式工作，因为如果您添加了5个输入，并且用户删除了第二个输入，则实际上将删除价值的第5个。

• 最后我尝试了输入。removeChild（li），但是获取错误“要删除的节点不是此节点的孩子”

var count = 0;
let colorNumX = [];
window.createinput = function() {
  var field_area = document.getElementById('fields')
  var li = document.createElement("li");
  var input = document.createElement("input");
  input.id = 'field' + count;
  input.name = 'field' + count;
  input.type = "text";
  li.appendChild(input);
  field_area.appendChild(li);
  //create the removal link
  var removalLink = document.createElement('a');
  removalLink.className = "remove";
  removalLink.onclick = function() {
    input.value = null;
    field_area.removeChild(li);
    count--;

  }
  removalLink.appendChild(document.createTextNode(' X Remove'));
  li.appendChild(removalLink);
  count++;
}

document.querySelector("#createInput").click();
document.getElementById("field0").value = "1234567890X";

function getResponse() {

  var panel_date1 = document.getElementById("panelDate1").value;

  for (i = 0; i <= count - 1; i++) {
    colorNumX[i] = document.getElementById("field" + i).value;
  }

  var colorString1 = colorNumX.join(', ');

  if (colorString1.length > 22) {
    var FPlen1 = colorString1.length;
    var FPnewString1 = colorString1.substring(0, FPlen1 - 11) + "and " + colorString1.substring(FPlen1 - 11);
    var FPbestString1 = FPnewString1.slice(0, -17) + FPnewString1.slice(-17);
  } else {
    var FPbestString1 = colorString1;
  }

  var comment = "Per the number(s) " + FPbestString1 + " dated " + panel_date1 + ", this item description is redacted";



  document.getElementById("commentHere").innerHTML = comment;

}

.flex-container {
  display: flex;
  background-color: DodgerBlue;
}

.flex-container>div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  position: relative;
}

.close {
  position: absolute;
  right: 5px;
  top: -15px;
  opacity: 0.5;
}

.close:hover {
  opacity: 1;
  cursor: pointer;
  color: darkred;
}

#createInput:hover {
  color: navy;
  opacity: 0.8;
  cursor: pointer;
}

.remove {
  opacity: 0.5;
}

.remove:hover {
  color: darkred;
  opacity: 1;
  cursor: pointer;
}

<button id="addPanelDate" onclick="AddPanelClicked()">Add Panel Date</button>
<div class="flex-container">

  <div style="display: inline-block">
    <input id="panelDate1" onchange="getResponse()">Panel Date</input>
    <ul onchange="getResponse()" id="fields">
    </ul>
    <a id="createInput" onclick="createinput()">Add Panel Number</a>
  </div>
</div>

<p id="commentHere"></p>

Answer 1

新的：
在您的代码中，请考虑您正在失去对生成的特定字段的引用。由于没有任何有意义的意义上记录的状态，因此您无法根据嵌套函数解析要针对哪个字段。具有针对您的字段的唯一ID是有效的HTML，但是当您删除它们时，您会失去其独特的ID。
您是否考虑过编写单独的删除函数，只是添加了一个用参数识别输入的参数？做这样的事情：

removalLink.addEventListener('click', function(){
    deleteInput("name"+count);
});
function deleteInput(str) {
// do stuff to delete item now that you know what it is.
}

旧：似乎这可能是范围的问题。您是否尝试更改var声明，以便在声明这些项目时让您使用？
我只是不确定当调用删除功能时，您正在定位自己的想法。

  let field_area = document.getElementById('fields')
  let li         = document.createElement("li");
  let input      = document.createElement("input");