如何使用 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) {

    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。