如何使用 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 从 onclick 传递到 remove（并且，由于您不希望它提交表单，因此给它一个 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。

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

How can I clone and remove a html form with JavaScript(js)?

javascript

html

forms

removechild