您根本不需要id。
最小的变化是将this中的remove从onclick传递到type（并且，由于您不希望它提交表单，因此请给它一个<button onclick="remove(this)" type="button">Next</button>
）：
remove
然后，在function remove(button) {
var form = button.closest("form");
form.parentNode.removeChild(form);
}
中，使用传入的按钮元素查找其所在的表单：
duplicate
您可以对function duplicate(button) {
var form = button.closest("form").cloneNode(true);
document.body.appendChild(form);
}
进行类似的更改：
id
请确保从表单中删除function remove(button) {
var form = button.closest("form");
form.parentNode.removeChild(form);
}
function duplicate(button) {
var form = button.closest("form").cloneNode(true);
document.body.appendChild(form);
}，因为它不是必需的，并且上面的内容会重复出现。
实时示例：
<form class="f0" action="action.php">
<input type="text" name="name" id="name" required="">
<button onclick="duplicate(this)" type="button">Duplicate</button>
<button onclick="remove(this)" type="button">Next</button>
</form>
onclick
但是更好的是根本不使用addEventListener属性，因为在执行此操作时，您必须使用全局函数，最好避免使用全局函数。使用现代事件处理（function remove() {
var form = this.closest("form");
form.parentNode.removeChild(form);
}
function duplicate() {
var form = this.closest("form").cloneNode(true);
setupHandlers(form);
document.body.appendChild(form);
}
function setupHandlers(form) {
form.querySelector(".form-duplicate").addEventListener("click",duplicate);
form.querySelector(".form-remove").addEventListener("click",remove);
}
// Setup handlers on any initially-present forms
document.querySelectorAll(".f0").forEach(setupHandlers);）：
<form class="f0" action="action.php">
<input type="text" name="name" id="name" required="">
<button class="form-duplicate" type="button">Duplicate</button>
<button class="form-remove" type="button">Next</button>
</form>
body
另一种选择是使用事件委托，处理所有这些形式都在容器元素中的单击（在您的示例中为document.body.addEventListener("click",function(e) {
var btn = e.target.closest(".form-duplicate");
if (btn && this.contains(btn)) {
duplicate(btn);
return;
}
btn = e.target.closest(".form-remove");
if (btn && this.contains(btn)) {
remove(btn);
return;
}
});
function remove(btn) {
var form = btn.closest("form");
form.parentNode.removeChild(form);
}
function duplicate(btn) {
var form = btn.closest("form").cloneNode(true);
document.body.appendChild(form);
}）
<form class="f0" action="action.php">
<input type="text" name="name" id="name" required="">
<button class="form-duplicate" type="button">Duplicate</button>
<button class="form-remove" type="button">Next</button>
</form>
{{1}}
请注意，closest是相对较新的，您需要IE的polyfill。
本文链接：https://www.f2er.com/3124802.html
