在删除子元素时，也要删除与其关联的HTML元素，而不指定其ID

Question

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

问题:当我添加框和输入值时，它显示一个字符串。酷。但是，当我删除一个框(并确保getResponse()函数在之后运行)时，我的字符串仍然显示被删除的输入的值。我希望这些值/元素不存在在我把孩子抱在JavaScript。即使我只将value设置为null，它仍然认为该元素存在，并将我的字符串弄乱。

What I have try

• 设置输入。值在运行删除子函数时为空。这是在我的代码下面。我也试过设置输入。Id为空。不工作，我甚至不确定这在语法中是否被允许。显然，我不这么认为。即便如此，仅将值设置为null而不是完全删除元素将在删除子元素时导致my string出现问题。

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

• 像往常一样删除元素[count]。这不会像我想要的那样工作，因为如果你添加了5个输入，并且用户删除了第二个输入，它实际上会删除第5个值。

• 最后我尝试了input.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

新建:考虑一下，在您的代码中，您正在丢失对您生成的特定字段的引用。由于没有任何有意义的状态记录，因此无法根据嵌套函数解析出要针对哪个字段。这是有效的HTML为您的字段有唯一的ID，但当你去删除他们，你失去了他们独特的ID。您是否考虑过编写一个单独的删除函数，并仅添加一个带有标识该输入的参数的助手方法?像这样做:

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

Old:看起来可能是范围的问题。你有没有试过改变var声明让当你声明项目?当删除函数被调用时，我只是不确定你的目标是你所认为的。

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