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

Question

I want to clone a form and then have the option to remove the form that I have just created. I know how to clone it, but not how to remove it. I have only be able to remove the original form, but not the clonned form.

This is my code:

 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

You don't need id s for this at all.

The minimal change is to pass this into remove from the onclick (and, since you don't want it to submit the form, give it a type ):

<button onclick="remove(this)" type="button">Next</button>

Then, in remove , use the button element that's passed in to find the form it's in:

function remove(button) {
    var form = button.closest("form");
    form.parentNode.removeChild(form);
}

You can make a similar change to duplicate :

function duplicate(button) {
    var form = button.closest("form").cloneNode(true);
    document.body.appendChild(form);
}

Be sure to remove the id from the form, since it's not needed and would be duplicated by the above.

Live Example:

 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>

---

But even better would be to not use the onclick attribute at all, because when you do you have to use global functions, and globals are best avoided. Use modern event handling ( addEventListener ) instead:

 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>

Another option is to use event delegation, handling the clicks on the container element all of these forms are in ( body in your example):

 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>

Note that closest is relatively new, you'll need a polyfill for IE.