如何使用 JavaScript(js) 克隆和删除 html 表单？

Question

我想克隆一个表单，然后可以选择删除我刚刚创建的表单。我知道如何克隆它，但不知道如何删除它。我只能删除原始表单，而不能删除克隆表单。

这是我的代码：

function duplicate(id) {

  var elmnt = document.getElementById(id);

  var cln = elmnt.cloneNode(true);

  var num = 1;

  cln.id = id + num;

  document.body.appendChild(cln);

}

function remove(id) {

  var elem = document.getElementById(id);

  elem.parentNode.removeChild(elem);

}

<form class="f0" action="action.php" id="f0">

  <input type="text" name="name" id="name" required="">

  <button onclick="duplicate('f0')">Duplicate</button>

  <button onclick="remove('f0')">Remove</button>

  <input type="submit" value="Next"/>

</form>

Answer 1

你根本不需要ids 。最小变动是通过this进入remove从onclick（和，因为你不希望它提交表单，给它一个type）：<button onclick="remove(this)" type="button">Next</button>然后，在 中remove，使用传入的按钮元素来查找它所在的表单：function remove(button) {&nbsp; &nbsp; var form = button.closest("form");&nbsp; &nbsp; form.parentNode.removeChild(form);}您可以对以下内容进行类似更改duplicate：function duplicate(button) {&nbsp; &nbsp; var form = button.closest("form").cloneNode(true);&nbsp; &nbsp; document.body.appendChild(form);}一定id要从表单中删除，因为它不需要并且会被上面的重复。现场示例：function remove(button) {&nbsp; &nbsp; var form = button.closest("form");&nbsp; &nbsp; form.parentNode.removeChild(form);}function duplicate(button) {&nbsp; &nbsp; var form = button.closest("form").cloneNode(true);&nbsp; &nbsp; document.body.appendChild(form);}<form class="f0" action="action.php">&nbsp; <input type="text" name="name" id="name" required="">&nbsp; <button onclick="duplicate(this)" type="button">Duplicate</button>&nbsp; <button onclick="remove(this)" type="button">Next</button></form>但更好的是根本不使用该onclick属性，因为当您使用时，您必须使用全局函数，并且最好避免使用全局函数。改用现代事件处理 ( addEventListener)：function remove() {&nbsp; &nbsp; var form = this.closest("form");&nbsp; &nbsp; form.parentNode.removeChild(form);}function duplicate() {&nbsp; &nbsp; var form = this.closest("form").cloneNode(true);&nbsp; &nbsp; setupHandlers(form);&nbsp; &nbsp; document.body.appendChild(form);}function setupHandlers(form) {&nbsp; &nbsp; form.querySelector(".form-duplicate").addEventListener("click", duplicate);&nbsp; &nbsp; form.querySelector(".form-remove").addEventListener("click", remove);}// Setup handlers on any initially-present formsdocument.querySelectorAll(".f0").forEach(setupHandlers);<form class="f0" action="action.php">&nbsp; <input type="text" name="name" id="name" required="">&nbsp; <button class="form-duplicate" type="button">Duplicate</button>&nbsp; <button class="form-remove" type="button">Next</button></form>另一种选择是使用事件委托，处理所有这些表单都在的容器元素上的点击（body在您的示例中）：document.body.addEventListener("click", function(e) {&nbsp; &nbsp; var btn = e.target.closest(".form-duplicate");&nbsp; &nbsp; if (btn && this.contains(btn)) {&nbsp; &nbsp; &nbsp; &nbsp; duplicate(btn);&nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; }&nbsp; &nbsp; btn = e.target.closest(".form-remove");&nbsp; &nbsp; if (btn && this.contains(btn)) {&nbsp; &nbsp; &nbsp; &nbsp; remove(btn);&nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; }});function remove(btn) {&nbsp; &nbsp; var form = btn.closest("form");&nbsp; &nbsp; form.parentNode.removeChild(form);}function duplicate(btn) {&nbsp; &nbsp; var form = btn.closest("form").cloneNode(true);&nbsp; &nbsp; document.body.appendChild(form);}<form class="f0" action="action.php">&nbsp; <input type="text" name="name" id="name" required="">&nbsp; <button class="form-duplicate" type="button">Duplicate</button>&nbsp; <button class="form-remove" type="button">Next</button></form>请注意，这closest是相对较新的，您需要一个用于 IE 的 polyfill。