为createElement创建的输入字段添加唯一ID及批量删除问题求助

问题分析与修复点 #

1. 新增字段ID错误问题 #

• 问题原因：添加邮箱字段时，错误地将邮箱格式的ID赋值给了姓名字段，导致姓名字段ID被覆盖为email_xxx，而邮箱字段本身未设置ID。
• 修复方式：将设置邮箱ID的代码对象从newNameField改为newEmailField，确保每个字段对应正确的ID格式。

2. 删除按钮单次仅删一个字段问题 #

• 问题原因：当前代码仅执行一次删除操作，只能移除最后一个字段，无法实现一组（姓名+邮箱）字段的批量删除。
• 修复方式：在确认表单子元素数量大于初始2个的前提下，连续执行两次删除操作，移除最后两个字段。

修正后的完整代码 #

JavaScript #

// set variables
let survey = document.querySelector(".survey");
let addField = document.getElementById("add_field");
let removeField = document.getElementById("remove_field");

// increment id's with counter
let nameId = "name_";
let emailId = "email_";
let nameCounter = 1;
let emailCounter = 1;

// Add new text field and email field
addField.addEventListener("click", (e) => {
  e.preventDefault(); // 阻止a标签默认跳转行为
  let newNameField = document.createElement("input");
  newNameField.setAttribute("type", "text");
  newNameField.setAttribute("name", "survey_options");
  newNameField.setAttribute("class", "survey_field");
  newNameField.setAttribute("id", nameId + (++nameCounter));
  newNameField.setAttribute("placeholder", "Another Name");
  survey.appendChild(newNameField);
  
  let newEmailField = document.createElement("input");
  newEmailField.setAttribute("type", "email");
  newEmailField.setAttribute("name", "survey_options");
  newEmailField.setAttribute("class", "survey_field");
  newEmailField.setAttribute("id", emailId + (++emailCounter)); // 修正：给邮箱字段设置正确ID
  newEmailField.setAttribute("placeholder", "Another Email");
  survey.appendChild(newEmailField);
});

// Remove extra text field and email field at once
removeField.addEventListener("click", (e) => {
  e.preventDefault(); // 阻止a标签默认跳转行为
  if (survey.children.length > 2) {
    survey.removeChild(survey.lastChild);
    survey.removeChild(survey.lastChild); // 新增：连续删除最后两个字段
  }
});

CSS #

.wrapper {
  width: 38vw;
  margin: 3em auto;
  padding: 1em;
  border-radius: 6px;
  background-color: white;
  box-shadow: 10px 10px 10px 0 rgba(47, 47, 47, 0.2);
}

input[name="survey_options"] {
  margin: 10px;
  padding: 10px;
  border-radius: 6px;
  border: solid 1px #e2e2e2;
  background: none;
  width: 15em;
  color: black;
}

input[name="survey_options"]:focus {
  outline: solid 1px lightgrey;
}

.controls {
  width: 25vw;
  margin: 1em auto;
}

a {
  text-decoration: none;
  color: black;
  font-weight: 700;
}

.svg-inline--fa {
  margin-right: 5px;
}

#remove_field {
  float: right;
}

HTML #

<div class="wrapper">
  <div class="survey">
    <input type="text" name="survey_options" class="survey_field" id="name_1" placeholder="Name" data-name="1" />
    <input type="email" name="survey_options" class="survey_field" id="email_1" placeholder="Email" data-email="1" />
  </div>
  <div class="controls">
    <a href="#" id="add_field"><i class="fa fa-plus"></i>Add Field</a>
    <a href="#" id="remove_field"><i class="fa fa-window-close"></i>Remove Field</a>
  </div>
</div>

内容的提问来源于stack exchange，提问作者ladetunji