你根本不需要ids 。
最小變動是通過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>
請注意，這closest是相對較新的，您需要一個用于 IE 的 polyfill。
